vue 父子组件与父子组件之间的通信

Posted cl94

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 父子组件与父子组件之间的通信相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<div id="app">
    <input type="text" v-model="msg">
    <!-- :cmovies="movies":父传子之传值 -->
    <!-- @item-click="itemClick":接收子组件通过自定义事件传过来的值(子传父亲) -->
    <!-- ref="c" 组件标识,利于得到该子组件实例对象 -->
    <cpn ref="c" :cmovies="movies" @item-click="itemClick"></cpn>
</div>


<!-- 子组件模板 -->
<template id="cpn">
    <div>
        <h1>从父组件传过来的值:</h1>
        
        <ul>
            <li v-for="item in xmovie" @click="clickmovie(item)">{{item}}--点我传值至父组件>></li>
        </ul>
    </div>
</template>
<script>    
    // 子组件    
    const cpn = {
        // 引用模板
        template : "#cpn",
        // props 父传子之接收
        // props: ["cmovies"],
        props : {
            cmovies :{
                // 限定类型
                type:Array,
                // 默认值(父组件未传值)
                default(){
                    // 这里为什么要用工厂函数?思考下,当限定类型为Object或Array时会报错
                    return [不能说的秘密,头文字D];
                },
            }
        },
        data(){
            return {
                // 将父组件传过来的值放到data里面,变成自己的属性(拓展性,不然不允许修改)
                xmovie : this.cmovies
            };
        },
        methods: {
            clickmovie (item){
                console.log("子组件点击",item)
                // 将点击事件转成自定义事件传给父组件
                // emit:发射
                console.log("值通过自定义事件发射至父组件")
                this.$emit(item-click,item);
            }
        },
        mounted(){
            console.log("cpn子组件挂载完毕,根组件root对象:",this.$root)
        }
    
    }
    // 父组件,在这里父组件是vue实例
    const app2 = new Vue({
        el: "#app",
        data: {
            // 准备传给子组件的值
            movies: [海王,海贼王],
            msg:"watch实时监测",
        },
        /*注册组件*/
        components:{
            cpn,
        },
        methods:{
            itemClick(item){
                console.log("父组件接收",item);
            }
        },
        //  watch:实时监测属性值的改变
        watch:{
            msg(newVal,oldVal){
                console.log("watch实时监测更新数据,新数据:",newVal)
            }
        },
        mounted  (){
            // this.$refs 所以的子组件 
            // this.$refs.c 子组件中 设置了ref属性值为c的内个组件
            console.log("vue实例挂载完毕,有一个子组件,实例对象为:",this.$refs.c)
        }
    })

</script>
</body>
</html>

 

以上是关于vue 父子组件与父子组件之间的通信的主要内容,如果未能解决你的问题,请参考以下文章

vue组件之间的通信, 父子组件通信,兄弟组件通信

12.组件化开发2-非父子组件之间通信-祖先和后代之间的通信

vue的$emit 与$on父子组件与兄弟组件的之间通信

vue父子组件之间的通信

vue之父子组件之间的通信方式

vue的父子组件以及非父子组件之间的通信方式