Vue 组件通信

最新推荐文章于 2024-06-14 07:10:08 发布

simple--

最新推荐文章于 2024-06-14 07:10:08 发布

阅读量259

点赞数 1

分类专栏： Vue.js 文章标签：自定义事件 $emit 父链子组件索引自定义组件使用v-model

本文链接：https://blog.csdn.net/weixin_42695446/article/details/84728942

版权

本文详细介绍了Vue组件通信的各种方法，包括子组件通过$emit向父组件发送数据，使用自定义事件和参数传递，利用native修饰符处理DOM事件，以及非父子组件间通信的中央事件总线和父链子组件索引。此外，还探讨了在自定义组件上使用v-model实现双向数据绑定的注意事项。

摘要由CSDN通过智能技术生成

Vue 组件通信

前一篇文章中总结了父组件通过props向子组件传递数据的内容，本篇文章总结一下其他的组件通信的情况：子组件向父组件传递数据，兄弟组件通信，跨级组件通信等。

（1）自定义事件

当子组件向父组件传递数据的时候，就用到了自定义事件：子组件用$emit()来触发事件，父组件通过v-on来监听子组件触发的事件，下面是一个示例：

<div id="app">
    <test v-on:change1="add"></test>
    <div>abc的值为：{
  {abc}}</div>
</div>
<script>
    Vue.component('test', {
    
        template: `
                <div v-on:click="$emit('change1')">
                点击这里向父级组件传递消息！
                </div>
        `
    });
    var app = new Vue({
    
        el: "#app",
        data: {
    
           abc:0
        },
        methods:{
    
            add:function(){
    
                this.abc++
            }
        }
    })
</script>

首先在定义的子组件内，通过v-on:click="$emit(‘change1’)"向父组件传递消息，也就是，在点击子组件中的<div>元素时触发了change1事件，同时父组件用v-on在<test>上监听这个事件：

 <test v-on:change1="add"></test>

当监听到这个事件时就会触发父级组件中的add方法，add方法会让父级组件中的abc的值加1。

1.通过事件向父组件发送消息时带参数

<div id="app">
    <test v-on:change1="add($event)"></test>
    <div>abc的值为：{
  {abc}}</div>
</div>
<script>
    Vue.component('test', {
    
        template: `
                <div v-on:click="$emit('change1',5)">
                点击这里向父级组件传递消息！
                </div>
        `
    });
    var app = new Vue({
    
        el: "#app",
        data: {
    
           abc:0
        },
        methods:{
    
            add:function(value){
    
                this.abc+=value;
            }
        }
    })
</script>

上面代码中，子组件通过事件change1向父级组件发送消息时带了参数5，在监听这个事件的时候，可以通过$event访问到这个传递的参数：

<test v-on:change1="add($event)"></test>

在触发父组件的add方法时，这个值将会作为第一个参数传入这个方法。

   add:function(value){
   
                this.abc+=value;
   }

上面的代码中，子组件向父级组件发送消息时带了参数5，这个参数最终被传递给了父级组件的add方法中，使得将父级组件的abc的值增加5。
上面的代码中，不通过$event，add方法也可以自动获取到传递的参数。

<div id="app">
    <test v-on:change1="add"></test>
    <div>abc的值为：{
  {abc}}</div>
</div>
<script>
    Vue.component('test', {
    
        template: `
                <div v-on:click="$emit('change1',5)">
                点击这里向父级组件传递消息！
                </div>
        `
    });
    var app = new Vue({
    
        el: "#app",
        data: {
    
            abc:0
        },
        methods:{
    
            add:function(value){
    
                this.abc+=value;
            }
        }
    })
</script>