vue中父子组件之间的通信

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第19天，点击查看活动详情

前言

组件之间的通信是很重要的，在开发中经常进行组件之间的通信，什么是组件之间的通信？在父子组件中子组件是不能引用父组件的数据的，当有时候一些数据需要从父组件传递给子组件，就像得从父组件那里将数据传递给子组件，这就是组件之间的通信

如何才能进行父子组件之间的通信呢？Vue的官方提到可以使用prpos向子组件传递数据和通过事件向父组件发送消息

父子组件通信-父传子

父组件传递数据需要用到props来声明需要从父级接收到的数据，props的值有两种方式，一种是字符串数组，数组中的字符就是传递时的名称，另一种是对象，可以设置传递时的类型，和设置默认值

当我们创建了一个组件，然后想将data里的数组传给这个组件，在注册组件的时候加上props属性，可以为数组或者对象，数组里面放上引用的变量名，父组件使用子组件的时候使用在子组件使用v-bind指令绑定props的变量名和data里的数据

<div id="app"> 
    <cpn :message="message"></cpn> //将子组件的message和父组件的message绑定
</div>

const cpn={
  template:`<div>{{message}}</div>`,
  props:['message'] 
}

props为对象时，可以指定对象属性的类型，父组件传过来的数据就必须是这个类型，也可以设置默认值，当父组件没有传值的时候默认为默认值

<div id="app"> 
    <cpn :message="message"></cpn>  
</div>

props:{
    message:{
        type:String,
        default:'默认值'
    }
}

<div id="app"> 
    <cpn></cpn>  //父组件没有传值，值默认为默认值
</div>

父子组件通信-子传父

例如下面这个页面，左边是一个子组件，而子组件的数据来自父组件也就是整个页面传进来的，当我们点击了其他的分类时候子组件就需要告诉父组件，让父组件重新请求分类数据重新渲染页面

子组件如何将信息传递给父组件呢？通过$emit，emit就是发射的意思，通过$emit发射一个事件给父组件，可以传递两个参数，第一个是事件的名称，第二个是要传递给父组件的数据，第二个可以不传，但是事件的名称一定要传，然后就可以在父组件接收传递过来的事件及数据参数

<div id="app">
    <cpn @itemClick="cpnclick"></cpn> //v-on绑定子组件发射的事件
</div>

<template id="cpn">
    <div>
        <button v-for="item in categories" @click="btnclick(item)">
            {{item.name}}
        </button>
    </div>
</template>

const cpn={
  template:'#cpn',
  data(){
    return{
      categories:[
        {id:'aaa',name:'热门推荐'},
        {id:'bbb',name:'手机数码'},
        {id:'ccc',name:'家用家电'}
      ]
    }
  },
  methods:{
    btnclick(item){
      this.$emit('itemclick',item) //子传父的事件名称和参数
    }
  }
}

const app=new Vue({
  el:'#app',
  components:{
    cpn
  },
  methods:{
    cpnclick(item){
      console.log('cpnclick',item); //获取子组件传递过来的参数
    }
  }
})