vue-组件通信

组件通信

1、父子通信

父组件给子组件通信是通过(porps)属性传递的

创建属性有2种方式

一种是静态创建属性 或叫静态prop传递数据

一种是动态创建属性 或叫动态prop传递数据

【案例】

<div id="app">
    <!-- 静态创建属性 或 静态prop传递数据-->
    <tk msgs="静态创建属性"></tk><br/>
    <!-- 动态创建属性 或 动态prop传递数据-->
    <tk v-bind:msgs="msg"></tk>
</div>
<!-- JavaScript 内联模板字符串 -->
<script type="text/x-template" id="tkTpl">
    <input type="button" @click="alerttk" value="弹框 " />
</script>
<script>
    //创建局部组件(注册)
    //组件里面的data是个函数
    var tankuang = {
        template:"#tkTpl",
        //注册属性
        props:['msgs'],
        methods:{
            alerttk:function(){
                alert(this.msgs)
            }
        }
    }
    //初始化根实例
    var app = new Vue({
        el:"#app",
        data:{
            msg:"动态创建属性"
        },
        //挂在组件
        components:{
            'tk':tankuang
        }
    });
</script>

2、子父通信

父组件定义事件,子组件触发这个事件，通过$emit来触发

【案例】

<div id="app">
    <tk msgs="子父通讯" v-on:jieshou="jieshoufn"></tk><br/>
</div>
<!-- JavaScript 内联模板字符串 -->
<script type="text/x-template" id="tkTpl">
    <input type="button" @click="alerttk" value="弹框 " />
</script>
<script>
    //创建局部组件(注册)
    //组件里面的data是个函数
    var tankuang = {
        template:"#tkTpl",
        //注册属性
        props:['msgs'],
        methods:{
            alerttk:function(){
                alert(this.msgs);
                this.$emit("jieshou","子向父传递","可以传递")
            }
        }
    }
    //初始化根实例
    var app = new Vue({
        el:"#app",
        data:{
            msg:"动态创建属性"
        },
        //挂在组件
        components:{
            'tk':tankuang
        },
        methods:{
            jieshoufn:function(arg1,arg2){
                alert("自己定义的事件");
                console.log(arg1);
                console.log(arg2);
            }
        }
    });
</script>

结果为下

3、非父子通信

触发组件 A 中的事件

在组件 B 创建的钩子中监听事件

【案例】

<div id="app">
    <tk></tk><br/>
    <tk1></tk1>
</div>
<!-- JavaScript 内联模板字符串 -->
<script type="text/x-template" id="tkTpl">
    <input type="button" @click="alerttk" value="弹框 " />
</script>
<script>
    var bus = new Vue();
    //创建局部组件(注册)
    //组件里面的data是个函数
    var tankuang = {
        template:"#tkTpl",
        methods:{
            alerttk:function(){
                //触发兄弟元素的事件
                bus.$emit("passid", 1,2);
            }
        }
    }
    var tankuang1 = {
        template:"<div>{{id}}</div>",
        data:function(){
            return {
                id : 0
            }
        },
        //定义函数要在钩子里定义
        mounted:function(){
            var shangmian = this;
            bus.$on("passid",function(arr1,arr2){
                shangmian.id=arr1+arr2
            })
        }
    }
    //初始化根实例
    var app = new Vue({
        el:"#app",
        data:{
            msg:"动态创建属性"
        },
        //挂在组件
        components:{
            'tk':tankuang,
            'tk1':tankuang1
        },
        methods:{
            jieshoufn:function(arg1,arg2){
                alert("自己定义的事件");
                console.log(arg1);
                console.log(arg2);
            }
        }
    });
</script>

结果为下图