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>

 

posted @ 2020-02-03 22:51  cl94  阅读(173)  评论(0)    收藏  举报