vue组件常用传值方法

1.父组件通信子组件

①属性props

//child

props:{msg:string}

//parent

<Helloword msg="测试信息"/>

②引用refs

//parent

<Helloword ref="hw"/>

this.$refs.hw.xx="messge"

③子组件children

this.$children[0].xx="message"

2.子组件通信父组件

//child

this.$emit("add",good)

//parent

<Cart @add="handAdd($event)"/>

3.兄弟组件之间的通信

通过共同的祖辈组件搭桥,$parent或$root

//兄弟1

this.$parent.$on("handleon",handle)

//兄弟2

this.$parent.$emit("handleon")

4.祖先和后代之间通信

provide/inject

provide(){

return {foo:"foo"}

}

inject:["foo"] 

5.任意2个组件之间,$bus或vuex

以上就是所有的组件通信的方法,希望能帮助你。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容