Vue父子组件之间的通信

父组件向子组件传递数据

定义父子组件的模板

<!--父组件模板-->
<div id="app">
    <!--把父组件的msg和str，传给组件cmsg和cstr-->
    <cpn :cmsg="msg" :cstr="str"></cpn>
</div>

<!--子组件模板-->
<template id="mycpn">
    <!--组件里，最好有一个div作为根元素-->
    <div>
        <h2>{{cstr}}</h2>
        <ul>
            <li v-for="(item,index) in cmsg">{{item}}</li>
        </ul>
    </div>
</template>

父传子通常使用props，我们只需要在子组件使用props

// const cpn = {template:"",props:{}};//写法跟Vue.extend不同，内容一样
    const cpn = Vue.extend({//设置子组件
        template:"#mycpn",
        props:{//在子组件定义cstr和cmsg属性
            cstr:{
                type:String,//默认String类型
                default() {//默认值
                    return "";
                }
            },
            cmsg:{
                type: Array,
                default() {
                    return [];
                }
            }
        }
    });

    //父组件
    const app = new Vue({
        el:"#app",
        data() {
            return {//定义属性，传值给子组件
                str:"这里是父组件传值给子组件",
                msg:["传值1","传值2","传值3","传值4"]
            }
        },
        components:{//注册组件
            cpn
        }
    })

注：HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

子组件向父组件传递数据

定义父子组件的模板

<!--父组件模板-->
<div id="app">
    <!-- itemclick是子组件$emit自定义事件,
         btn是父组件事件，
        不写参数默认传递cbtn的item
     -->
    <cpn @itemclick="btn"></cpn>
</div>

<!--子组件模板-->
<template id="mycpn">
    <div>
        <button v-for="(item,index) in cmsg" @click="cbtn(item)">{{item.name}}</button>
    </div>
</template>

子传父使用$emit

//设置子组件
    const cpn = {
        template:"#mycpn",
        data(){
            return {
                cmsg:[
                    {
                        id: '1',
                        name: '热门推荐'
                    },
                    {
                        id: '2',
                        name: '手机数码'
                    },
                    {
                        id: '3',
                        name: '家用家电'
                    },
                    {
                        id: '4',
                        name: '电脑办公'
                    }
                ]
            }
        },
        methods: {
            cbtn(item) {
                //定义itemclick事件，通过$emit传值
                this.$emit('itemclick', item)
            }
        }
    }

    //父组件
    const app = new Vue({
        el:"#app",
        methods:{
            btn(item) {//获取子组件的值
                console.log(item);
            }
        },
        components:{
            cpn
        }
    });

组件的双向绑定

在Vue开发中双向绑定常用，现在的需求是子组件的input修改了数据，父组件的数据就立刻更新

<div id="app">
    <!-- cnum1把父传子，@dcinp1父接收子的值-->
    <cpn :cnum1="num1" :cnum2="num2" @dcinp1="acinp1" @dcinp2="acinp2"></cpn>
</div>

<template id="cpn">
    <div>
        <h3>props：{{cnum1}}，子组件data：{{dcnum1}}</h3>
        <input v-model="dcnum1" @input="inpNum1">
        <h3>props：{{cnum2}}，子组件data：{{dcnum2}}</h3>
        <input v-model="dcnum2" @input="inpNum2">
    </div>
</template>

    //设置子组件
    const cpn = {
        template:"#cpn",
        data(){
            return {//与子组件的input同步的数据
                dcnum1:this.cnum1,
                dcnum2:this.cnum2
            }
        },
        methods:{
            inpNum1(event){
                //子组件input输入时，同步cpn的data的值
                this.dcnum1 = event.target.value;
                //子把值传给父的num1，与num1同步
                this.$emit("dcinp1",this.dcnum1)
            },
            inpNum2(event) {
                this.dcnum2 = event.target.value;
                this.$emit("dcinp2",this.dcnum1)
            }
        },
        props:{
            cnum1:Number,
            cnum2:Number
        }
    }

    //父组件
    const app = new Vue({
        el:"#app",
        data() {
            return {
                num1:1,
                num2:2,
            }
        },
        methods:{
            acinp1(value){//获取子组件传给来的值
                this.num1 = parseInt(value);
            },
            acinp2(value) {
                this.num2 = parseInt(value);
            }
        },
        components:{
            cpn
        }
    })