初识vue 2.0（5）：使用props父子组件通信

在复杂场景中，可以使用专门的状态管理模式 Vuex。

简单的场景中，可以使用一个父组件、若干个子组件来构建应用，这样通信会比使用vuex简单些：

1. 子组件的 props 选项可以接收父组件传递过来的数据，这是一个单向数据流的过程，子组件对props改动，不会影响父组件。

2. 子组件也可以通过自定义事件向父组件传递数据。父组件监听自定义事件，子组件使用 $emit 触发这个事件。

 

 父组件:

1. 在父组件hello中引入子组件son，并注册在components中；

2. 在父组件hello的模版中，通过自定义标签引入子组件son模版。

3. 通过子组件son模版标签的自定义属性msg传递数据，传递动态数据使用 :msg (即：v-bind:msg)，否则直接使用msg即可。

4. 在子组件模版标签中监听自定义事件receive（@receive 即 v-on:receive），监听子组件传递的信息。

<template>
  <div class="hello">
    <son :msg="msg" @receive="receive"></son>
    <p>{{ answer }}</p>
  </div>
</template>

<script>
import Son from '@/components/Son'
export default {
  name: 'hello',
  components: {
    Son
  },
  data () {
    return {
      msg:'我是hello模块传递给子模块的信息',
      answer:''
    }
  },
  methods: {
   receive(answer) {
     this.answer = answer;
    }
  }
}
</script>

 

子组件：

为了模拟数据传递过程，在子组件中构建click事件，用于触发子组件对父组件的数据传递。

1. 子组件通过props接收父组件传递的数据msg。可以直接通过模版标签{{ msg }}显示于模版中，也可以通过this.msg获取。

2. 点击回复按钮，调用send方法，通过$emit，触发父组件中的自定义事件receive，将数据answer传递给父组件。

<template>
  <div class="son">
    <p>{{ msg }} <button v-on:click="send">回复</button></p>
  </div>
</template>

<script>
export default {
  name: "son",
  props: ["msg"],
  data () {
    return {     
      answer:"我是Son模块传递给父模块的信息"
    }
  },
  methods: {
   send() {
      this.$emit("receive",this.answer);
    }
  }
}
</script>

 还有一种组件通信方式是event bus，可以进行兄弟组件之间数据传递，有时间在分享下。 ^_^