我是怎么学会vue的17：父子组件的通信

父组件向子组件传递数据：props（父传子通过属性名传）

常用于请求列表数据：要显示ul->li列表时，父组件向服务器请求数据，数据存放在父组件里，并把数据传递给子组件，然后子组件使用 v-for 遍历显示。（因为子组件不能直接访问父组件或vue实例的数据）

传递方法

1. 父组件data定义数据
2. 在子组件的HTML标签中，使用 v-bind 自定义属性，并把父组件数据的值赋给属性

3. 注册组件时，添加 props 属性，指定传入数据的类型、默认值、是否必须。

   注意：
   1.type支持的类型有：String、Number、Boolean、Array、Object、Date、Function、Symbol
   2、默认值：认值必须是一个函数
   3、props在子组件中有多种定义方式：既可以使用数组，也可以使用对象

   props写法1：传数组
   props:['cmovies','cmessages'] //cmovies、cmessages是变量名

   props写法2：传对象
   传对象的好处：可以给变量指定类型、提供默认值
   props:{
          cmovies:{
              type:Array,
              //default:"aaaaa",
              //类型是对象或数组时，默认值必须是一个函数。2.5.17以下的低版本可以写成default:[]
              default(){
                  return []
              },
              required:true
          }
   }

4. 在子组件的模板中使用数据。

属性如果不是通过v-bind绑定的，则绑定的是字符串，不是变量；vue不会去父组件里找对应的变量给属性赋值。

当我们有自定义构造函数时，验证也支持自定义的类型。

props的驼峰标识

如果props里面的属性名需要使用驼峰标识命名，则组件标签绑定的属性名，需要使用减号分隔的形式命名。

<cpn :c-info="info" :child-my-message="message" v-bind:class></cpn>

props: {
   cInfo: {
      type: Object,
        default() {
          return {}
     }
}

组件模板中用到组件的地方也需要使用驼峰写法。

<template id="cpn">
  <div>
    <h2>{{cInfo}}</h2>
  </div>
</template>

子组件向父组件传递数据：通过自定义事件

使用情景：子组件点击了，需要告诉父组件 子组件发生了什么事件（点击事件），点击的是哪个。父组件根据我点击的不同内容去请求不同的数据。

步骤

1. 子组件发射自定义事件

   • 子组件模板 绑定点击事件（或其他事件）
   • 定义点击事件的回调函数：发射事件（自定义事件的事件名、参数）

2. 父组件监听自定义事件

   • 在父组件模板里面绑定自定义事件
   • 定义回调函数，用于接收传递的数据，并根据这个数据执行相应的动作。

演示

<!--父组件模板-->
<div id="app">
  <!--
  step2 在父组件模板里 绑定自定义事件。
  这里会默认把参数item传进去，不需要写。
  -->
  <cpn @item-click="cpnClick"></cpn>
</div>

<!--子组件模板-->
<template id="cpn">
  <div>
  <!--step1 子组件模板 绑定点击事件 把参数item传进去-->
    <button v-for="item in categories"
            @click="btnClick(item)"> 
      {{item.name}}
    </button>
  </div>
</template>

<script src="../js/vue.js"></script>
<script>

  // 1.子组件
  const cpn = {
    template: '#cpn',
    data() {
      return {
        categories: [
          {id: 'aaa', name: '热门推荐'},
          {id: 'bbb', name: '手机数码'},
          {id: 'ccc', name: '家用家电'},
          {id: 'ddd', name: '电脑办公'},
        ]
      }
    },
    methods: {
      btnClick(item) {
        // step1 发射事件: 自定义事件
        this.$emit('item-click', item)
      }
    }
  }

  // 2.父组件
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn
    },
    methods: {
      cpnClick(item) {
        //step2 定义回调函数，用于接收传递的数据，并根据这个数据执行相应的动作
        console.log('cpnClick', item);
      }
    }
  })
</script>
</html>

注意

自定义事件的名称，不能使用驼峰写法！

比如这里我们自定义事件的命名，可以写itemclick，也可以写item-click，但是不能写itemClick，否则会报错。

如果是在脚手架里面则可以使用驼峰写法。