VUE - 父子组件之间的通信，小案例

父向子传值

理解 ：通过父组件在子组件标签上绑定属性来向子组件传递数据，子组件通过props来接收数据。

注意点 ：当props里有用驼峰命名的，对应组件标签上的属性名就是 kebab-case 格式的

父组件传递值用法都是一样的都是通过绑定属性进行传递的，而子组件接收父组件传递来的值缺失有很多用法，这里一 一 举例说明一下；

	<div id="app">
        <wg-keep post="[]"></wg-keep>
    </div>

    <template id="wgKeep">
        <div>
            <ul>
                <li>{{post.title}}</li>
                <li>{{post.name}}</li>
                <li>{{post.content}}</li>
            </ul>
        </div>
    </template>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>

        const wgKeep = {
            template : "#wgKeep",
            props:["post"]
        };

        var vm = new Vue({
            el:"#app",
            data:{
                message:"加油！"
            },
            components:{
                "wg-keep" : wgKeep
            }
        })

    </script>

接值用法1: 数组接值，props中的名称要和组件标签上的属性名称一致。能够接收String,Number,Boolean,Array,Object,Date,Function,Symbol

		const wgKeep = {
            template : "#wgKeep",
            props:["post"]
        };

接值用法2：对象接值

		const wgKeep = {
            template : "#wgKeep",
            props:{
                post:{
                    type : Array,     // 限制类型，可以是多个如:[Array,String] 能够验证的类型有:String,Number,Boolean,Array,Object,Date,Function,Symbol
                    required : true,  // true代表必填
                    default(){        // 默认值，当是对象和数组的时候得从函数中拿返回值
                        return [1,2,3];
                    },
                    validator(value){ // 验证传递来的参数
                        return value.length == 3
                    }

                }
            }
        };

子向父传值

理解 ：子组件通过 $emit向外抛出事件。父组件监听这个事件并接收。

案例1 ：不传参数

	<div id="app">
        <wg-keep @parent-click="sumCount"></wg-keep>
       {{count}}
   </div>

   <template id="wgKeep">
       <div>
           <button @click="btn">按钮</button>
       </div>
   </template>

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

   <script>

       const wgKeep = {
           template : "#wgKeep",
           methods:{
               btn(){
                   this.$emit("parent-click");
               }
           }
       }

       var vm = new Vue({
           el:"#app",
           data:{
               count : 0
           },
           components:{
               "wg-keep" :wgKeep
           },
           methods:{
				sumCount(){
					this.count++;
				}
		   }
       })

   </script>

结果：

案例2：传参数

注意 ：原来触发时间不传参数默认传递的是浏览器生成的event对象，而这里自定义的事件默认抛的是子组件传递过来的参数 ，当然如果传递了多个参数下面的案例中也可以写成 sumCount(val,val2...){ this.count += val; }

	<div id="app">
        <wg-keep @parent-click="sumCount"></wg-keep>
       {{count}}
   </div>

   <template id="wgKeep">
       <div>
           <button @click="btn">按钮</button>
       </div>
   </template>

   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

   <script>

       const wgKeep = {
           template : "#wgKeep",
           methods:{
               btn(){
                   this.$emit("parent-click",2);
               }
           }
       }

       var vm = new Vue({
           el:"#app",
           data:{
               count : 0
           },
           components:{
               "wg-keep" :wgKeep
           },
           methods:{
				sumCount(val){
					this.count += val;
				}
		   }
       })

   </script>

结果 ：