Vue子组件、父组件传值，子组件与子组件传值

需要了解Vue的实例间数据传递，我们看下面3点总结

1、Vue中子组件不能直接与子组件传递数据(如果需要传递子组件需要借助它们的父组件)

2、子 => 父：子组件向父组件传值使用触发机制($emit)

3、父 => 子：父组件向子组件传值使用props属性

它们的关系可如下结构所示：

 现在我有3个组件

父组件：RegionTemplate.vue

子组件A：RegionTemplates.vue

子组件B：Region.vue

需求(A => B)：我需要把A组件的部分数据传递到B组件供其使用

直接上代码：

子组件A ：RegionTemplates.vue

子组件从后端拉取到数据后，将一部分数据通过$emit触发父组件中callbackAllTpls事件执行

 

父组件：RegionTemplate.vue

<template>
  <div>
    <a-tabs defaultActiveKey="1">
      <a-tab-pane key="1" tab="Region Template">
        <!-- 引用地区模板组件 -->
        <RegionTemplates @callbackAllTpls="callbackAllTpls"></RegionTemplates>
      </a-tab-pane>
      <a-tab-pane key="2" tab="Region">
        <!-- 引用地区组件 -->
        <Region :allTpl="allTpls"></Region>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

父组件的data如下：

 说明一下：

<RegionTemplates @callbackAllTpls="callbackAllTpls"></RegionTemplates>

上面这行代码中，

1、@callbackAllTpls就是刚刚子组件A中$emit()触发的事件，即：这里你改成@aaaa的话，那么this.$emit(‘aaaa’, 你要传给父组件的数据)

2、@callbackAllTpls="AAAA"，后面AAAA这部分就是你要写的一个函数来对这个事件作出逻辑的处理，即$emit了callbackAllTpls的话就会使得AAAA函数执行

 

---

我们来继续看刚刚的父组件中子组件B的代码

 这里意思就是，给子组件B动态绑定一个allTpl的属性，并且将父组件的allTpls这个数据传给子组件。

好，现在转到子组件B看代码。

 子组件在data()函数之外写一个props用于接收父组件的数据，allTpl 名字需要跟刚刚父组件中给子组件动态绑定的名称一样，这样子才可以正确传值给子组件B，此时子组件也就相当于在data()数据中包含了一个allTpl属性，也就是说，我们可以使用this.allTpl这种写法

注意：为了能实时获取父组件中新的数据，我们写watch去监控这个变量，父组件更新的时候也会动态推送给子组件B，这时候如果watch了这个值之后就会及时更新新的数据到组件B实例上。

直接看 watch的代码

 至此，就实现了A组件给B组件传值，他们使用了父组件作为中间纽带。

希望能帮助到不会使用的朋友。