vue专题

vue组件常用传值方法

2019-11-24  本文已影响0人  奇点先生

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

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

上一篇 下一篇

猜你喜欢

热点阅读