vue——组件通信

父传子

父传递:自定义属性形式进行数据绑定
在父组件的模版中对子组件标签进行属性绑定

<child :message="hello"></child>

子接收：props
在子组件中使用props属性显式地接收

props: ['message']，//然后即可使用this.message使用。

子传父：
tip：需要事件来触发完成
子组件：this.$emit('自定义的方法名称', 空/数据)

methods: {
    test() {
       this.$emit('funcName',data)
    },
}

父组件：在子组件名称（标签）上，绑定“子组件自定义的方法名称”；然后在此组件中的methods里面定义回调函数

<child @funcName='sayHello'></child>
<script>
methods: {
  sayHello (val) {
      console.log(val)
  }
}
</script>

兄弟传递：
子组件：this.$emit('自定义的方法名称', 空/数据)
父组件：在子组件名称（标签）上，绑定“子组件自定义的方法名称”；然后在此组件中的methods里面定义回调函数；再把此组件获得的数据通过父传子的方式传递给子组件即可
参考：https://blog.csdn.net/qq_36407748/article/details/80150137

A是父组件，B是A的子集，C是B的子集，A传数据给C；用$attrs和$listeners
在A的页面上的B组件上绑定要传递的数据

<b :messagec="messagec"></b>
data() {
  return {
      messagec:'hello c' //传递给c组件的数据
  }
}

B页面

<c v-bind="$attrs" v-on="$listeners"></c>

C页面

<input type="text" v-model="$attrs.messagec" @input="passCData($attrs.messagec)"> </div>
//通过`$attrs`和`$listeners` 传递过来的数据保存在全局变量`$listeners`上

vue——组件通信

父传子

推荐阅读更多精彩内容