组件通信的方式
一、父传子
在父组件中给子组件标签上绑定一个属性(属性=属性值), 属性上挂载需要传递的值
在子组件通过props:[“自定义属性名”]来接收数据
props 接收数据的方式有两种:数组形式和对象形式
二、子传父
(1)在父组件中给子组件标签绑定一个自定义事件,给这个事件挂载需要调用的方法
(2)在子组件的方法通过this.$emit(‘自定义事件名’,“要传递给父组件的数据”)来调用
三、兄弟组件之间传值
(1). 创建一个空的vue实例eventBUS,将其挂载到vue原型上
Vue.prototype.$bus = new Vue()
(2)通过this.$bus.$emit(‘事件名’,‘要传递出的数据’)传到空的vue实例中
(3)通过this.$bus.$on(‘事件名’,(参数)=>{挂载从兄弟组件传来的数据})来接收
注意: 一定要用箭头函数 来让this 指向外面的组件实例
-
父传子
-
子传父
-
兄弟组件传值
-
利用 vuex 进行组件通信 把公共的数据存在 vuex 里 就可以实现组件之间都能使用这个数据了
-
v-model 也能实现组件通信 因为 v-model 就是 :value 和 @input 事件的合写
如果在一个子组件上使用 v-model 也能实现父子组件之间的通信 -