Vue中父子数据的传递-详细

Vue中父子数据的传递

在vue中，父子组件的关系可以总结为prop向下传递 ，$emit事件向上传递，父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息
父传子：
父组件通过props传递一个变量给子组件接收，子组件通过v-bind绑定一个变量接收
demo1：

 <div id="app">
        <!-- v-bind：子组件传的名字='父组件里面的名字' -->
        <cpn v-bind:cmovies='movies'></cpn>
    </div>

<template id="cpn">
    <div>
        <ul>
            <!-- 循环遍历子组件里面的接受的数组 -->
            <li v-for='item in cmovies'>{{item}}</li>
        </ul>
    </div>
</template>

<script>
    const cpn = {
        template: '#cpn',
        props: {
            cmovies: Array,
            cmovies: {//prop传递对象的方法，可限制类型
                type: Array,
                default: "",//为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。
                required: true//定义该 prop 是否是必填项
            },
        }
    }
    //将根组件视为父组件
    const app = new Vue({
        el: '#app',
        data: {
            movies: ["a", "b", "c", "d"]
        },
        components: {
            cpn,//缩写方式
        }
    })
</script>

子传父：
demo2：

 <div id="app">
        <[email protected]相当于形参  cpnclick是实参  -->
        <cpn @itemclick='cpnclick'></cpn> <!-- 父组件监听事件 -->
    </div>

<!-- 子组件模板 -->
<template id="cpn">
    <div>
        <button v-for="item in goods" @click='btnclick(item)'>{{item.name}}</button>
    </div>
</template>

<script>
    //子组件
    const cpn = {
        template: "#cpn",
        data() {
            return {
                goods: [
                    { id: 1, name: "热门推荐" },
                    { id: 1, name: "家用电器" },
                    { id: 1, name: "手机数码" },
                    { id: 1, name: "电脑办公" }
                ]
            }
        },
        methods: {
            btnclick(item) {
                this.$emit("itemclick", item);//$emit子组件发射一个虚拟事件itemclick
            }
        }
    }
    const app = new Vue({
        el: "#app",
        data: {
            message: "你好vue！"
        },
        components: {
            cpn
        },
        //接受到了虚拟事件传递过来的参数
        methods: {
            cpnclick(item) {
                console.log("子组件传递的事件", item)
            }
        }
    })
</script>

以上就是简单的父子组件数据访问的方法