Vue@2.x系列之父子组件之间的通信

1. 父组件向子组件传递数据

Vue父组件通过 Prop 向子组件传递数据。子组件通过vm.$emit()触发父组件的自定义事件，向父组件传递数据。

1.1 子组件（UserList.vue）

<template>
  <div class="hello">
    <h3>{{title}}</h3>
    <ul>
      <li v-for="(user, index) in userList" :key="index">
        <span>姓名：{{user.name}}</span>
        <span>所在部门：{{user.section}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'UserList',
  props: ['title', 'userList']
}
</script>

1.2 父组件（App.vue）

<template>
  <div id="app">
    <UserList
      title="员工信息"
      :userList="userList"
    />
  </div>
</template>

<script>
import UserList from './components/UserList.vue'

export default {
  name: 'App',
  components: {
    UserList
  },
  data() {
    return {
      userList: [
        { id: 1, name: '张三', section: '人事部'},
        { id: 2, name: '李四', section: '事业部'}
      ]
    }
  }
}
</script>

1.3 页面效果

1.4 小结

一个组件注册任意数量的prop，父组件在调用子组件的时候，传给子组件的属性如果和注册的prop同名，子组件就能够获取到父组件传递的数据。

1. 如果向子组件中传递静态数据，可以直接：attribute=value，如上方代码中的titile属性。
2. 如果向子组件中传递的是动态数据，需要使用v-bind指令动态绑定属性：:attribute=value，如上方的userList属性。

2. 子组件向父组件传递数据

子组件可以通过调用内建的 $emit 方法通过触发父组件传递给子组件的自定义事件来传递数据。

• 点击子组件中的添加员工按钮；
• 触发父组件传给子组件的自定义事件；
• 将用户信息作为参数传给自定义事件的回调函数。

2.1 子组件（UserList.vue）

<template>
  <div class="hello">
    <h3>{{title}}</h3>
    <ul>
      <li v-for="(user, index) in userList" :key="index">
        <span>姓名：{{user.name}}</span>
        <span>所在部门：{{user.section}}</span>
      </li>
    </ul>
    <button type="button" @click="addUserAction">添加员工</button>
  </div>
</template>

<script>
export default {
  name: 'UserList',
  props: ['title', 'userList'],
  methods: {
    // 点击按钮，添加员工信息
    addUserAction() {
      this.$emit('addUser', { id: 3, name: '王五', section: '技术部'});
    }
  }
}
</script>

2.2 父组件（App.vue）

<template>
  <div id="app">
    <UserList
      title="员工信息"
      :userList="userList"
      @addUser="addUserFn"
    />
  </div>
</template>

<script>
import UserList from './components/UserList.vue'

export default {
  name: 'App',
  components: {
    UserList
  },
  data() {
    return {
      userList: [
        { id: 1, name: '张三', section: '人事部'},
        { id: 2, name: '李四', section: '事业部'}
      ]
    }
  },
  methods: {
    /**
     * 添加员工信息
     * @param {Object} userInfo 员工信息
     */
    addUserFn(userInfo) {
      this.userList = [ ...this.userList, userInfo]
    }
  }
}
</script>

2.3 页面效果

• 点击按钮之前
  
• 点击按钮之后
  

2.4 小结

1. 父组件给子组件传递一个自定义事件。
2. 子组件通过vm.$emit()触发该自定义事件，并将数据通过参数的形式传给自定义事件的回调函数。
3. 父组件自定义事件被触发，调用回调函数，获取数据。