Vue兄弟组件传参

最新推荐文章于 2024-02-23 17:56:29 发布

qq_46433453

最新推荐文章于 2024-02-23 17:56:29 发布

阅读量260

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_46433453/article/details/116354312

版权

要想在父子组件中使用对方的参数，需要一个时间中心来处理，定义一个Vue对象在mounted中调用监听函数$on,在处理的方法中比如nethods中使用 $emit()来调用。
举个例子

 <div id="app">
        <div>父组件</div>
        <div>
            <button @click="handle">销毁事件</button>
        </div>
        <test-tom>
            <template slot="s">
                <p >我是Tom</p>
            <p>我不是Tom</p>
            </template>
            
        </test-tom>
       <test-jerry></test-jerry>
    </div>

   var hub = new Vue({

        })
        Vue.component('test-tom',{
            data:function(){
                return{
                    num:0
                }
            },

            template:`
                <div>
                  <slot name="s"></slot>
                <div>Tom:{{num}}</div>
                <div>
                <button @click='handle'>点击</button>
                </div> 
                </div>
            `,
            methods:{
                handle:function(){
                    hub.$emit('jerry-event',2)
                }
            },
            mounted:function(){
                hub.$on('tom-event', val => {
                    this.num += val
                });
            }
        })
        Vue.component('test-jerry',{
            data:function(){
                return{
                    num:0
                }
            },
           
            template:`
                <div>
                <div>jerry:{{num}}</div>
                <div>
                <button @click='handle'>点击</button>
                </div>
                </div>
            `,
            methods:{
                handle:function(){
                    hub.$emit('tom-event',1);
                }
            },
            mounted:function(){
                hub.$on('jerry-event', val => {
                    this.num += val
                });
            }
        })
        var vm = new Vue({
            el:'#app',
            data:{

            },
            methods:{
                handle:function(){
                    hub.$off('tom-event');
                    hub.$off('jerry-event');
                }
            }
        })