VUE 父子通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text"  v-model="parent">
    <v-header  @chan="rua"  :msg="parent">
    </v-header>
    <!--<v-header @zizi="sun" @chan="rua" :sz="parent"></v-header>-->
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            parent:"我是父元素的内容"
        },
        methods:{
            rua(val){
//                alert("子元素发生改变了 把我触发了")；
                 this.parent=val
            },
            sun(val){
                alert("孙子元素发生改变了 把我触发了")
            }
        },
        components:{
            "vHeader":{
                data(){
                  return  {
                      "parent":"我是子元素的内容我的data是方法"
                  }
                },
                props:["msg"],
                template:" <div><h1>我是局部注册的子元素 {{msg}}</h1>" +
                "<input type='text'  v-model='msg'>" +
                "<button @click='change'>dianwo</button></div>",
                methods:{
                    change(){
                            this.msg="hahhh";
                          this.$emit("chan",this.parent)
                    }
                },
//                components:{
//                    "vSeader":{
//                        data(){
//                            return{
//                                "parent":"我是孙子元素的方法"
//                            }
//                        },
//                        props:["sz","msg"],
//                        template:"<div><h1>我是孙子元素{{msg}}</h1>" +"<input type='text'  v-model='msg'>"+
//                                "<input type='text'  v-model='sz'>"+
//                                "<button @click='bian'>点击我</button></div>",
//                        methods:{
//                            bian(){
//                                this.sz="wossunzi";
//                                this.$emit("zizi",this.parent)
//                            }
//                        }
//
//
//
//
//                    }
//
//
//
//                }

            }


        }



    })







</script>
</body>
</html>
猜你喜欢
