Vue：父子组件间的通信

父组件通过 props 向子组件传递数据

• 格式
  
  在父组件中注册子组件，使用子组件的时候使用 v-bind 绑定：v-bind:sonmsg=“pmsg”，子组件中：

  1. props:[‘sonmsg’]
  2. props:{sonmsg:TypeOf pmsg}

  即可把父组件中的pmsg数据传给子组件中名称为sonmsg的数据。

• 注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。(修改时需要通过 data 进行修改，避免直接改变通过 props 接收的值，在使用双向绑定 v-model 修改时，可以将 props 接收的数据赋值给 data 数据，再通过改变 data 数据进行改变)

• 示例：

<!-- html -->
<div id="app">
  <!-- 数据传递 -->
  <cpn :cmsg="message" :cobj="obj"></cpn>
</div>

//子组件
var cpn ={
            template:"#cpn",
            <!-- 子组件中进行声明 -->
            props:['cmsg','cobj'],
            data() {
                return {
                    title:"dyg"
                }
            },
        }
//父组件
const app = new Vue({
            el: "#app",
            data() {
                return {
                    //需要传递的数据
                    message: '父组件信息',
                    obj:{
                        color:'red',
                        size:15
                    }
                }
            },
            components:{
                // 增强写法
                cpn
            }
        });

<!-- 使用 -->
<template id="cpn>
<div>
{{cmsg}}+{{cobj}}
</div>
</template>

//官方文档使用说明
Vue.component("my-component", {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function() {
        return { message: "hello" };
      }
    },
    // 自定义验证函数
    propF: {
      validator: function(value) {
        // 这个值必须匹配下列字符串中的一个
        return ["success", "warning", "danger"].indexOf(value) !== -1;
      }
    }
  }
});

子组件向父组件传递信息

• 格式：
  
  子组件中某个触发的事件通过$emit 进行一个新事件的声明，在父组件中绑定该事件即可（在非 cli 生成工程模式下此事件不能使用驼峰结构进行声明），
  子组件中：默认将点击按钮后按钮的 index 值传给父组件

<div id="app">
  <!-- 省略参数默认传递子组件中通过$emit传递的参数 -->
  <cpn @itemclick="cpnClick"></cpn>
</div>

<template id="cpn">
<div>
<button @click="btnClick(index)" v-for="(item,index) in categories" :key="index">
{{item.name}}
</button>
</div>
</template>
const cpn = {
  template:"#cpn",
  data(){
    return{
       categories:[
                    {id:'aa',name:'热门推荐'},
                    {id:'bb',name:'手机数码'},
                    {id:'cc',name:'家电'},
                    {id:'dd',name:'服装'},
                    {id:'ee',name:'家居修饰'}
                ]
    }
  },
  methods:{
      btnClick(index){
        //后面跟需要传入的参数
        this.$emit("itemclick",index)
      }
  }
  const app = new Vue({
    el:"#app",
    data(){
      return {

      }
    },
    methods:{
      cpnClick(){
        console.log("第"+(index+1)+"个按钮被点击")
      }
    }
  })

}