5分钟上手vue组件开发

对于许多刚开始学习vue的朋友，可能对于vue的父子组件之间如何通信不是很了解，今天作者就vue父子组件之间的通信做了一个小的demo来方便大家快速的理解父子组件通信原理，下面将结合代码对父子组件通信进行分析，希望可以帮助到需要的朋友。（项目变大以后相信大家会用到组件开发的，因为组件开发对项目的后续开发会有着较大的意义）

先来试一下小的demo，感受一下父子组件之间的通信是个啥

demo: 在线 Demo

父组件向子组件传值（father.vue部分代码）

父组件向子组件传值，主要包括在父组件中引入子组件，将值传给子组件的过程（跟着下面的第一、二、三步去看）。
father.vue部分的代码如下（样式代码未包括在内）：

<template>
  <div class="father">
    <div>
      <div class="box">
        <div>
          {{message}}
        </div>
        <button class="button" @click="sendToChild">父传子</button>
      </div>

      <!--调用子组件，并绑定要传给子组件的参数，并指定接收子组件传值的方法（第三步）-->
      <child :toChild = 'toChild' @getChildData = 'getChildData'></child>
    </div>
  </div>
</template>

<script>
import Child from './components/child'  // 该处引入子组件（第一步）

export default {
  components: {  // 该处将组件挂载到父组件（第二步）
    Child
  },
  data () {
    return {
      message: '我是父组件',
      toChild: ''
    }
  },
  methods: {
    // 传值到子组件的函数
    sendToChild: function () {
      this.toChild = '我是父组件传给子组件的值'
    },
    // 接收子组件传值的函数
    getChildData: function (val) {
      this.message = val
    }
  }
}
</script>

如果导入的子组件为childComponent样式，在中要写成（因为html对大小写不敏感，具体请参见https://cn.vuejs.org/v2/guide/components-registration.html）

子组件接收父组件的值并向父组件传值（child.vue部分代码）

子组件接收父组件传值，主要包括接收父组件传值，并根据父组件值的变化而变化，并且在该部分代码中包含了子组件向父组件传值的代码（vue本不支持子组件修改父组件的数据，防止恶意修改页面，也防止组件太多导致管理混乱，但是仍可以通过$emit来实现向父组件的传值）。

<template>
  <div class="child">
    <div>
      {{message}}
    </div>
    <button class="button" @click="sendToFather">子传父</button>
  </div>
</template>

<script>
export default {
  props: ['toChild'],  // 获取父组件传值（第一步）
  data () {
    return {
      message: '我是子组件'
    }
  },
  watch: {
    toChild (val) {  // 该处监听父组件传值是否变化，若变化则赋新值（第二步）
      this.message = val
    }
  },
  methods: {
    // 向父组件传值函数
    sendToFather: function () {
      this.$emit('getChildData', '我是子组件传给父组件的值')  // 该处实现将子组件的值传给父组件（第三步）
    }
  }
}
</script>

以上即为父子组件之间通信的一个基本实现代码，为了方便大家查看，作者将代码放在了github上，地址为：https://github.com/guodonglw/vue-component-communication