Vue父子组件之间的传值

Posted 2020-12-08 bushui

父组件向子组件传递数据

定义父子组件的模板

<!--父组件模板-->
<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
        }
    });