笔者今天自学vue组件间的传值时非常混乱，故在此整理一下。

父子传值

prop: 父向子传值

步骤：

在子部件标签中加入自定义属性： <Son :fatherMsg="msg"/>

在子部件中添加props数组： props:['fatherMsg']

let Son={
  props:['fatherMsg'],
  template: `
    <div>
    <h2 class="display-4 text-secondary">This is Son</h2>
    <p class="text-danger">{{fatherMsg}}</p>
    </div>`
};

let Father = new Vue({
  el:'#app',
  data(){
    return{
      msg:'A message from father.'
    }
  },
  components:{
    Son
  },
  template:`
    <div>
      <h2 class="display-4 text-primary">This is Father</h2>
      <Son :fatherMsg="msg"/>
    </div>`
});

## $emit：子向父传值子传父与父传子略有不同，依赖于事件，我们定义一个按钮用于触发事件。

步骤： - 准备发送数据的方法 methods: {sendMsg(){this.$emit('sendMsgFromSon',this.msg);}}, - 准备一个触发事件的对象并指定发送数据的方法（如button) <button class="btn btn-success" @click="sendMsg">Send</button> - 预留一个接收数据的参数 sonMsg: 'Message does not arrive.' - 准备接收数据的方法并修改参数 methods: {getMsg(resp) {this.sonMsg = resp;}}, - 在子部件中加入自定义属性接收数据并指定接收数据的方法 <Son @sendMsgFromSon="getMsg"/>

let Son = {
  data() {
    return {
      msg: 'A message from son.'
    }
  },
  methods: {
    sendMsg() {
      this.$emit('sendMsgFromSon', this.msg);
    }
  },
  template: `
    <div>
    <h2 class="display-4 text-secondary">This is Son</h2>
    <button class="btn btn-success" @click="sendMsg">Send</button>
    </div>`,
};

let Father = new Vue({
  el: '#app',
  data() {
    return {
      sonMsg: 'Message does not arrive.'
    }
  },
  components: {
    Son
  },
  methods: {
    getMsg(resp) {
      this.sonMsg = resp;
    }
  },
  template: `
    <div>
      <h2 class="display-4 text-primary">This is Father</h2>
      <p class="text-danger">{{sonMsg}}</p>
      <Son @sendMsgFromSon="getMsg"/>
    </div>`
});

祖父子孙传值

有了父子传递的经验，那么多层传递是否也可以用多个prop和emit实现呢？

当然可以，不过这显得太麻烦了。于是，vue2.4推出了$attrs和$listeners帮我们解决了这个问题。

$attrs: 祖父向子孙传值

不然发现，此处的Father和prop例子中的完全相同，Grandson也与Son除名字外完全相同，唯一的区别是多了中间组件。

关键步骤：

中间组件中添加子孙组件为子组件 components:{Grandson},

使用v-bind为子组件绑定$attrs <Grandson v-bind="$attrs"/>

let Grandson = {
  props: ['fatherMsg'],
  template: `
    <div>
      <h2 class="display-4 text-success">This is Grandson</h2>
      <p class="text-danger">{{fatherMsg}}</p>
  </div>`
};

let Son = ({
  components: {
    Grandson
   },
  template: `
    <div>
      <h2 class="display-4 text-secondary">This is Son</h2>
      <Grandson v-bind="$attrs"/>
    </div>`
});

let Father = new Vue({
  el: '#app',
  data() {
    return {
      msg: 'A message from father.'
    }
  },
  components: {   
    Son
  },
  template: `
    <div>
      <h2 class = "display-4 text-primary"> This is Father </h2>
      <Son :fatherMsg="msg"/>
    </div>`
});

## $listeners: 子孙向祖父传值有了祖父传子孙的经验，子孙传祖父也大同小异，只需在子传父的基础上添加即可：

为中间组件添加子孙组件为子组件 components:{Grandson},
使用v-on为子组件绑定$listeners <Grandson v-on="$listeners">

let Grandson = {
   data() {
    return {
      msg: 'A message from Grandson.'
    }
  },
  methods: {
    sendMsg() {
      this.$emit('sendMsgFromGrandson', this.msg);
    }
  },
  template: `
    <div>
    <h2 class="display-4 text-success">This is Grandson</h2>
    <button class="btn btn-success" @click="sendMsg">Send</button>
    </div>`,
};

let Son = {
  components: {
    Grandson
  },
  template: `
  <div>
  <h2 class="display-4 text-secondary">This is Son</h2>
  <Grandson v-on="$listeners"/>
  </div>`
};

let Father = new Vue({
  el: '#app',
  data() {
    return {
       grandsonMsg: 'Message does not arrive.'
    }
  },
  components: {
    Son
  },
  methods: {
    getMsg(resp) {
      this.grandsonMsg = resp;
    }
  },
  template: `
    <div>
      <h2 class="display-4 text-primary">This is Father</h2>
      <p class="text-danger">{{grandsonMsg}}</p>
      <Son @sendMsgFromGrandson="getMsg"/>
   </div>`
});

任意传值

中央事件总线：任意组件间传值

最后的方法叫做中央事件总线，它可以实现任意组件的传值，无论是父子、祖父子孙、还是兄弟。

这里我们创建了一个全局的bus，这个bus就像一个接线员，接收一个数据，再发送给别的组件。

步骤：

声明一个全局的Vue作为总线 let bus = new Vue();
为发送数据的组件添加方法，使用bus.$emit发送 methods:{sendMsg(){bus.$emit('msgFromComponent1', this.msg);}},
为发送数据的组件提供事件触发方法（此处使用按钮）： <button class="btn btn-success" @click="sendMsg">Send</button>
为接收的数据预留槽位 data(){return{msg: 'Message does not arrive.'}},
为接收数据的组件提供方法，使用bus.$on接收（此处使用mounted，意味着数据改变就调用方法，从而实现同步更新） mounted() {bus.$on('msgFromComponent1', (resp) => {this.msg = resp;})},

let bus = new Vue();

let Component1 = new Vue({
  el: '#app',
  data() {
    return {
      msg: 'A message from component1.'
    }
  },
  methods: {
    sendMsg() {
      bus.$emit('msgFromComponent1', this.msg);
    }
  },
  template: `
    <div>
      <h2 class="display-4 text-primary">This is Component1</h2>
      <button class="btn btn-success" @click="sendMsg">Send</button>
    </div>`
});

let Component2 = new Vue({
  el: '#app2',
  data() {
    return {
      msg: 'Message does not arrive.'
    }
  },
  mounted() {
    bus.$on('msgFromComponent1', (resp) => {
      this.msg = resp;
    })
  },
  template: `
   <div>
     <h2 class="display-4 text-secondary">This is Component2</h2>
     <p class="text-danger">{{msg}}</p>
   </div>`
})

以上5种方法讲解完成，除此之外，还有provided / inject和$parent / $children[index]等方法，不过不太常用，大家可以自行了解。

吴世涵的博客

vue组件间父子传值、祖父子孙传值和任意传值的5种方法，prop,emit,attrs,listeners以及中央事件总线