vue 父子组件通信

1、父传子

通过props 向子组件传递数据
在组件中，使用选项props 来声明需要从父级接收到的数据
props 的值有两种方式：

1、字符串数组，数组中的字符串就是传递时的名称

父组件代码

<template>
    <div id="parent-compon">
        <h2>父组件</h2>
        <!-- 父传子的时候，在父组件里面使用子组件的时候，
        然后props的值用 v-bind 绑定，绑定之后作为子组件的属性，
        这个属性对应的属性值就是需要传过来数据的父组件的变量名， -->
        <child :cmovies="movies" :cmessage="message"></child>
    </div>
</template>
<script>
import child from './Child.vue'
export default {
  components: { child },
  data () {
    return {
      message: 'hello',
      movies: ['frozen', 'black swan', 'lucy', 'the matrix']
    }
  }

}
</script>
<style scoped>
#parent-compon{
    border: 4px solid pink;
}
</style>

子组件代码

<template>
  <div id="child-compon">
      <h3>子组件</h3>
    <!-- 可以在子组件使用这个数据了，但是这个数据的名字是props里面写的那个名字 -->
    <p>{{ cmovies }}</p>
    <ul>
      <li v-for="(item, index) in cmovies" :key="index">{{ item }}</li>
    </ul>
    <h2>{{ cmessage }}</h2>
  </div>
</template>
<script>
export default {
  // 可以传多个值 cmovies就看成是一个变量
  // 1、 这个props 是一个数组
  // props 尽量不要使用驼峰，因为使用了驼峰在使用的时候，就会需要变成短横线链接，不然就报错
  props: ['cmovies', 'cmessage'],
  data () {
    return {}
  },
  methods: {}
}
</script>
<style scoped>
#child-compon{
    border: 1px solid red;
}
</style>

这是最终显示的结果，父组件里面包含了子组件，

<p>{{ cmovies }}</p>

上面这行代码最终显示的是父组件传过来的movies数组的数据，但是在子组件中使用的时候是用的props里面对应的名字，也就是父组件里面v-bind绑定的那个名字
下面这行代码是父组件里面对应的代码

 <child :cmovies="movies"></child>

2、对象，对象可以设置传递时的类型，也可以设置默认值等

props 为对象的时候只有props里面跟props为数组时不一样，其它代码跟上面的一样，所以接下来就只写有差异的部分代码

1、类型的限制

 props: {
    // 1、类型的限制
    cmovies: Array,
    cmessage: String
}

2、不仅限制类型还提供默认值和是否必传

props: {
    cmessage: {
      // 设置cmessage的类型为String类型
      type: String,
      // 默认值，当这个属性没有值的时候，就显示默认值
      default: 'aaaaaaaa',
      // required 值为true 就是必须要传值，为false就可传可不传
      required: true
    },
    // 类型是对象或者数组时，默认值必须是一个函数
    cmovies: {
      type: Array,
      default () {
        return []
      },
      required: false
    }
  }

2、子传父

通过自定义事件 $emit 向父组件发送消息
子组件代码

<template>
  <div class="emit-child">
    <h2>子组件</h2>
    <!--
            自定义事件的流程：
            1、在子组件中，使用$emit 来触发事件
            2、在父组件中，通过 v-on 来监听子组件事件
         -->
    <button type="button" v-for="(item,index) in categories" @click="childClick(item)" :key="index">
      {{ item.name }}
    </button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      categories: [
        { id: 'aaa', name: '热门推荐' },
        { id: 'bbb', name: '手机数码' },
        { id: 'ccc', name: '家用电器' },
        { id: 'ddd', name: '电脑办公' }
      ]
    }
  },
  methods: {
    childClick (item) {
      // console.log(item);
      // 发射事件,事件类型是自定义的，在父组件的子组件标签里面监听这个事件
      // 就是<emit-child @childemitclick="parentClick"></emit-child>  将item作为参数传递过去
      // 用v-on 绑定这个事件，然后在父组件的methods里面定义这个parentClick事件
      // v-on 也可以用于组件间的自定义事件
      this.$emit('childemitclick', item)
    }
  }
}
</script>

父组件代码

<template>
    <div class="emit-parent">
        <h2>父组件</h2>
        <!-- 这里的parentClick没有参数，系统会默认把item传递过来 -->
        <emit-child @childemitclick="parentClick"></emit-child>
    </div>
</template>
<script>
import emitChild from './emitChild.vue'
export default {
  components: {
    emitChild
  },
  data () {
    return {

    }
  },
  methods: {
    // 在此接收子组件传过来的参数 item
    parentClick (item) {
      console.log('parentClick', item)
    }
  }
}
</script>