Vue组件通信

最新推荐文章于 2023-01-31 10:54:43 发布
最新推荐文章于 2023-01-31 10:54:43 发布
阅读量329 收藏 2
点赞数 1
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuxian_wj/article/details/121103972
版权

前言

Vue中不管是每个页面，还是从多个页面中抽取出来的公共代码封装，都属于组件。在Vue项目中组件开发是必不可少的。那么组件与组件之间必定不是完全分离的，大多业务组件之间涉及到数据交互，组件通信必不可少。那么在Vue项目中都有哪些通信方式，应用场景分别是怎么样的呢？

为什么要用到组件通信

组件是Vue最强大的功能之一，组件实例的作用域是相互独立的，这意味着不同组件之间的数据无法相互引用。所有组件都无法直接访问其他组件的data、methods、computed，每个组件都是一个局部作用域，这样做的目的是为了保护私有变量，保证每个组件之间的data不会相互影响。但是我们需要将组件相互连接起来，这些组件相互之间会有数据依赖以及需要修改从其他组件传递过来的数据，这种情况我们统称为数据通信。
一般来说在Vue中有组件间的关系分为父子组件、兄弟组件、或者是隔代关系。

不同的通信方式适用于不同的组件关系进行数据通信。

实现组件通信的方式

父子组件传值

1. prop/$emit

prop

一般父组件向子组件传值都使用prop属性。使用方法也很简单，我们一般将需要传递到子组件的属性通过动态绑定的方式绑定在子组件上，然后在子组件中通过props来接收。

// 父组件
<template>
    <div class="home">
        <div>father: {{count}}</div>
        <button @click="addCount">father: +1</button>
        <hello-world :fatherCount="count" />
    </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
    name: "Home",
    data() {
        return {
            count: 3
        }
    },
    components: {
        HelloWorld
    },
    methods: {
        addCount() {
            this.count++
        }
    }
}
</script>

// 子组件
<template>
    <div>
        <div class="hello">child: {{fatherCount}}</div>
        <button @click="addFatherCount">child: +1</button>
    </div>
</template>

<script>
export default {
    name: "HelloWorld",
    props: {
        fatherCount: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {}
    },
    methods: {
        addFatherCount() {
            this.fatherCount++
        }
    }
};
</script>

我们可以看到，通过动态绑定v-on在父组件上将数据绑定在子组件上。子组件中通过props接收父组件传过来的数据。父组件中修改对应数据，子组件中会跟着修嘎，子组件中直接修改从父组件中传过来的数据会报错，但是子组件的页面渲染还是会跟着修改。父组件在对该数据进行修改，即使子组件中数据已被子组件自己修改过，仍然会再次与父组件数据保持一致。那么如果我们想通过子组件修改父组件的数据该怎么处理呢？说实话我们应该尽量避免这种情况的发生，毕竟vue设置单向数据流机制也是为了避免子组件随意修改父组件的值。

$emit

官方给的介绍是：触发当前实例上的事件，附加参数都会传给监听器回调。所以我们可以在父组件中，将修改数据的函数传给子组件，在子组件中通过$emit来调用父组件的函数。所以$emit的本质是子组件调用父组件函数进行数据修改。

那么我们该怎么使用$emit来从子组件修改父组件的数据呢，我们在上一个栗子上进行修改：

// 修改子组件函数
    methods: {
        addFatherCount() {
            this.$emit('addCount')
        }
    }

运行看效果，点击子组件+1按钮，也可以正常修改父组件传过来的数据了。

2. $children/$parent

parent

官方介绍：指定已创建的实例之父实例。子实例可以用this.$parent访问父实例，子实例被推入父实例的$children数组中。

但是，请注意但是，官方也说了：节制地使用$parent和$children，它们的主要目的是作为访问组件的应急方法。更推荐用parent和events实现父子组件通信。所以大家在用的时候斟酌一下。

子组件可以通过this.$parent访问其父组件的实例，可以访问父组件的实例就可以访问该组件的所有方法和data。我们来看一下该怎么使用$parent向子组件传递数据，也就是在子组件获得父组件的数据。

// 父组件
<template>
    <div class="home">
        <div>father: {{count}}</div>
        <button @click="addCount">father: +1</button>
        <hello-world />
    </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
    name: "Home",
    data() {
        return {
            count: 3
        }
    },
    components: {
        HelloWorld
    },
    methods: {
        addCount() {
          this.count++
          console.log(this.$children[0].fatherCount)
          // 这里如果执行,程序会进入死循环
          // this.$children[0].addFatherCount()
        }
    }
}
</script>

// 子组件
<template>
    <div>
        <div class="hello">child: {{fatherCount}}</div>
        <button @click="addFatherCount">child: +1</button>
    </div>
</template>

<script>
export default {
    name: "HelloWorld",
    data() {
        return {}
    },
    computed: {
        fatherCount() {
            return this.$parent.count
        }
    },
    methods: {
        addFatherCount() {
          	this.$parent.count++
            this.$parent.addCount()
        }
    }
};
</script>

我们可以看到，在子组件中通过this.$parent可以直接访问父组件的数据，调用父组件函数，并可直接修改父组件数据。在父组件中我们也可以用this.$children[i]获得对应子组件的数据，也可以直接调用子组件函数。在栗子中，我们注释掉的那一块代码，如果运行起来就会进入死循环，因为在父组件中调用子组件函数，子组件的该函数中调用父组件，循环调用，无限循环。

3. .sync

看官方介绍：在有些情况下，我们可能需要对一个prop进行"双向绑定"。但是真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件。所以推荐以update.myPropName的模式触发事件取而代之。
我们看一看.sync修饰符具体使用方式：

// 父组件
<template>
    <div class="home">
        <div>father: {{count}}</div>
        <button @click="addCount">father: +1</button>
      // 将count绑定在子组件上
        <hello-world :fatherCount.sync="count" />
    </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
    name: "Home",
    data() {
        return {
            count: 3
        }
    },
    components: {
        HelloWorld
    },
    methods: {
        addCount() {
            this.count++
            console.log(this.$children[0].fatherCount)
        }
    }
}
</script>

// 子组件
<template>
    <div>
        <div class="hello">child: {{fatherCount}}</div>
        <button @click="addFatherCount">child: +1</button>
    </div>
</template>

<script>
export default {
    name: "HelloWorld",
    props: {
        fatherCount: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {}
    },
    methods: {
        addFatherCount() {
          // 通过该方式修改子组件的值，父组件值跟着改变
            this.$emit("update:fatherCount", 5)
        }
    }
};
</script>

4. ref

ref被用来给元素或子组件注册引用信息。引用信息会注册到父组件的$refs对象上。如果在普通地DOM元素上使用，引用就指向该DOM元素；如果用在子组件上，引用就指向组件实例。当v-for用于元素或组件的时候，引用信息将包含DOM节点或组件实例的数组。所以在父组件中就可以通过ref主动获取子组件的属性或调用子组件的方法。

注意：关于ref注册时间的重要说明：因为ref本身是作为渲染结果被创建的，在初始渲染的时候我们还不能访问它们，因为它们此时并不存在。$refs也不是响应式的，所以我们不能试图用它在模版中做数据绑定。

// 父组件
<template>
    <div class="home">
        <button @click="addCount">father: +1</button>
        <hello-world ref="child" />
    </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
    name: "Home",
    data() {
        return {
            count: 0
        }
    },
    components: {
        HelloWorld
    },
    methods: {
        addCount() {
            const child = this.$refs.child
            child.addChildCount();
            console.log(child.childCount);
        }
    }
}
</script>

// 子组件
<template>
    <div>
        <div class="hello">child: {{childCount}}</div>
        <button @click="addChildCount">child: +1</button>
    </div>
</template>

<script>
export default {
    name: "HelloWorld",
    data() {
        return {
            childCount: 2
        }
    },
    methods: {
        addChildCount() {
            this.childCount++
        }
    }
};
</script>

其他

1. $emit/$on

这种方法通过一个空的Vue实例作为中央事件的总线（事件中心），用它来触发事件和监听事件，巧妙而轻量的实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案Vuex。

我们来看一下具体该怎么使用呢：

// 父组件
<template>
    <div class="home">
        <child-component />
        <hello-world />
    </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue"
import ChildComponent from "../components/child.vue"
export default {
    name: "Home",
    data() {
        return {
            count: 0
        }
    },
    components: {
        HelloWorld,
        ChildComponent
    }
}
</script>

我们实现一个兄弟传值，其实并不限于兄弟组件之间，重点看两个子组件

// HelloWord, 在该组件中派发事件
<template>
    <div>
        <div class="hello">{{childName}}Count : {{childCount}}</div>
        <button @click="sendChildCount">派发事件</button>
    </div>
</template>

<script>
export default {
    name: "HelloWorld",
    data() {
        return {
            childName: "helloWord",
            childCount: 2
        }
    },
    methods: {
        sendChildCount() {
            this.$EventBus.$emit('hello-name', this.childName)
            this.$EventBus.$emit('hello-count', ++this.childCount)
        }
    }
};
</script>

// ChildComponent, 在该组件中监听事件的派发
<template>
    <div>
        <div class="hello">childCount: {{count}}</div>
        <div>{{brotherName}}</div>
        <div>{{count}}</div>
    </div>
</template>

<script>
export default {
    name: "ChildComponent",
    data() {
        return {
            childName: "child",
            brotherName: "",
            count: 0
        }
    },
    created() {
        this.$EventBus.$on('hello-name', name => {
            this.brotherName = name
            console.log(111);
        })
        this.$EventBus.$on('hello-count', count => {
            this.count = count
        })
        console.log(this);
    }
};

一定要注意，这里用的是一个全局事件总线，在于$EventBus，这是一个空的Vue实例，为了方便我们把这个事件总线定main.js中注册在Vue的原型链上了，所以我们通过this可以访问到该事件总线，不需要我们每次使用都去new一个空Vue。

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false
Vue.prototype.$EventBus = new Vue()

new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

2. $attrs、$listeners

$attrs

那么先来大概说一下，什么是$attrs。

$attrs包含了父作用域中不作为prop被识别的attribute绑定（class和style除外）。当一个组件没有声明任何prop时，这里会包含所有父级作用域的绑定，摒弃可以通过v-bind = '$attrs'传入内部组件——在创建高级别的组件时非常有用。

$listeners

$listeners包含了父作用域中（不含.native修饰器的）v-on事件监听器。可以通过v-on = "$listeners"传入内部组件。

使用方式

多组件嵌套一般我们会使用vuex，但是如果仅仅是传递数据，并不做中间处理，就不需要vuex，我们就可以通过$attrs与$listeners来进行数据处理。

接下来看实例：

// 父组件
<template>
    <div class="home">
        <hello-world :parentCount="count"
                     :parentName="name"
                     :parentAge="age"
                     @addCount="addCount"
                     @addAge="addAge" />
    </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue"
export default {
    name: "Home",
    data() {
        return {
            count: 3,
            name: 'home',
            age: 0
        }
    },
    components: {
        HelloWorld
    },
    methods: {
        addCount() {
            this.count++
        },
        addAge() {
            this.age++
        }
    }
}
</script>

// 子组件
<template>
    <div>
        <div class="hello">parentCount: {{parentCount}}</div>
        <div>attrs: {{$attrs}}</div>
        <button @click="addParentCount">count+1</button>

        <child-component v-bind="$attrs"
                         v-on="$listeners"
                         @addParentCount="addParentCount" />
    </div>
</template>

<script>
import ChildComponent from './child.vue'
export default {
    name: "HelloWorld",
    components: {
        ChildComponent
    },
    props: {
        parentCount: {
            type: Number,
            default: 0
        }
    },
    methods: {
        addParentCount() {
            console.log(this.$listeners) // 包含父级所有绑定的方法
            this.$listeners.addCount()
        }
    }
};
</script>

// 子组件的子组件
<template>
    <div>
        <hr />
        <div class="hello">grandpaName: {{parentName}}</div>
        <div>attrs: {{$attrs}}</div>
        <button @click="addCount">age+1</button>
    </div>
</template>

<script>
export default {
    name: "ChildComponent",
    props: {
        parentName: {
            type: String,
            default: ''
        }
    },
    methods: {
        addCount() {
            console.log(this.$listeners) // 包含父级所有绑定的方法
            this.$listeners.addAge()
        }
    }
};
</script>

根据运行结果，我们可以知道$attrs里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。我们可以将$attrs与$listeners传递给子组件，在后代组件中可访问对应的属性与方法。

provide、inject

官方介绍：这对选项需要一起使用，以允许一个祖先组件向其所有后代组件注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。

provide选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的property。在该对象中你可以使用symbol作为key。
indect选项应该是：

  • 一个字符串数组或者
  • 一个对象，对象的key是本地的绑定名，value是
    • 在可用的注入内容中搜索用的 key (字符串或 Symbol)，或
    • 一个对象，该对象的：
      • from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)
      • default property 是降级情况下使用的 value

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

使用方法

我们来个实例看一下具体使用方法：

// 祖先组件
<template>
    <div class="home">
        count: {{count}}
        <hello-world />
    </div>
</template>

<script>
import HelloWorld from "../components/HelloWorld.vue"
import Vue from "vue"
export default {
    name: "Home",
    data() {
        return {
            count: 3,
            name: 'home',
            age: 0
        }
    },
    components: {
        HelloWorld
    },
    provide() {
        return {
            parentCount: this.count,
            addCount: this.addCount
        }
    },
    methods: {
        addCount() {
            this.count++
        }
    }
}
</script>

// 后代组件
<template>
    <div>
        <hr />
        <button @click="addCount">count+1</button>
        <div class="hello">parentCount: {{parentCount}}</div>
    </div>
</template>

<script>
export default {
    name: "ChildComponent",
    inject: {
        parentCount: {
            type: Number,
            default: 0
        },
        addCount: {
            type: Function,
            default: () => { }
        }
    }
};
</script>

在后代组件中都可以获得祖先组件通provide传递的属性和函数。

Vuex

最后在过于复杂的组件传值并且可能需要在中间做一些数据处理，我们就可以用Vuex去处理，关于Vuex我们就不过多讲解。

庸人°
关注
专栏目录
vue组件通信传值操作示例
12-29
本文实例讲述了vue组件通信传值操作。分享给大家供大家参考，具体如下： 父子组件通信： 子组件 <h3 click=alerrt> 我是子组件一 <span>{{parentMessage}} [removed] export default{ props: ['...
vue组件通信
qq_67983277的博客
11-09 781
vue组件通信
组件的通信小结
lcback1_的博客
05-27 123
组件通信的分类 组件通信， 无论效果是如何的， Vue都是单向数据流（组件之间的数据通信） 通信的目的：传参、控制（A操控B做一个事件）、数据共享 1.父子组件的通信 绑定的是简单类型数据 父组件中定义数据， 通过单向数据绑定的形式， 将数据绑定在子组件身上， 属性是自定义属性， 子组件通过配置项中的props接收数据， props可以是一个数组，数组中放的是自定义属性名称 那么这个自定义...
VUE组件通信
最新发布
jia嘉ioo的博客
01-31 133
vue组件通信
VUE 组件间的通信
LYSMQ的博客
08-29 179
VUE 组件间的通信 父传子 使用 父组件用在使用子组件时绑定值进行传递，子组件用props接收 //父组件 <template> <div> <child :childData = 'msg'/> </div> </template> <script> export default { components: { child }, data() { return { ms
为什么组件之间要进行通信
qq_55179512的博客
04-23 559
为什么要进行组件之间的通信？ 组件中的数据大都是从接口中导入，每个页面中有几十个几百个组件组合而成，若每个组件都依次从接口中调用请求数据，这样虽然和正常一样能达到目的，但会造成网络压力大、页面请求缓慢登问题，因此诞生了组件之间的通信，在我们的父组件一次性将其需要从接口中调用的数据取出，然后将数据传入子组件进行使用，从而解决了每个组件都要从接口请求数据所造成的问题并且加强了组件之间的关联性。 ...
Vue组件通信的几种实现方法
10-17
以下几种方法是实现Vue组件间通信的常见方式： 1. 父子组件通信 在Vue中，父子组件之间的通信相对直接。父组件可以向子组件传递数据，而子组件则可以向父组件发送消息。 - 通过props向下传递数据：父组件通过在子...
Vue组件通信的四种方式汇总
11-27
本文重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白。 父子组件的通信 非父子组件的eventBus通信 利用本地缓存实现组件通信 Vuex通信 第一种通信...
Vue组件间的通讯方式
qq_40063198的博客
06-27 1066
Vue组件间的通讯方式
vue通过Vuex实现多页面的数据联动
浮生离梦的博客
12-20 4359
一、需求问题 在vue的开发中，可能会经常遇到这样的需求。在一个页面中有一些选择的信息，比如说城市列表信息，当选择不同的城市信息后，所有相关页面的数据都会发生变化，也就是多页面的数据联动。这种多页面的数据联动在外卖平台、生鲜平台、电影平台等等是非常常见的。 二、需求分析 针对多页面的数据联动，我们可以使用Vuex配合本地存储区解决。关于Vuex和localStorage的结合，可以看一下我之前写的...
详解vuex 解决多个组件之间的通信问题
Allen的博客
10-13 893
详解vuex 1.安装 yarn add vuex 2.引入vuex 并且让vue使用vuex src/store/index.js（仓库） //引入vuex import Vuex from "vuex" import Vue from "vue" Vue.use(Vuex) //让vue使用Vuex //创建store仓库 let store = new Vuex.Store({ }) export default store; //需要暴露出去 3.在main.js入口文件里注册store /
vue常见开发问题整理
dgce56105的博客
06-29 573
1.(webpack)vue-cli构建的项目如何设置每个页面的title 在路由里每个都添加一个meta [{ path:'/login', meta: { title: '登录页面' }, component:'login' }] 钩子函数： 在main.js中添加如下代码 router.beforeEach((to,...
浅谈Vue组件之间通信的五种方式
futuredeveloper的博客
02-29 1004
在vue中我们经常需要用到组件之间进行通信,下面我就来说说组件之间的几种通信方式: 1.父传子 父传子我们一般通过动态绑定属性的方式获取
关于组件通讯一些自己理解
qq_40106513的博客
03-29 230
关于组件通信你必须要理解一件事：事件派发者与监听者是同一个。也就是说谁派发的就由谁监听。 一，事件总线 任意两个组件之间传值常⽤事件总线 或 vuex的⽅式。 1，局部事件总线 main.js: exportvar$burVue=newVue() childA: import{$burVue}from'../main' $parent.$emit('change...
对Vue中组件通信的一些理解
huhu_nihao的博客
06-26 486
对Vue中组件通信的一些理解 一、介绍 1. 为什么要进行组件通信？ ​ 组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件互相之间要建立联系，这个联系我们就称之为通信。 2. 组件通信的方式有以下几种： （1）父子组件通信： ​ 使用props来实现 （2）子父组件通信： ​ ...
vue组件之间的通信传值方式
信心比天才重要
04-02 441
vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？ 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家，坐着一屋子的陌生人，相互之间怎么称呼，这时就需要先知道自己和他们之间是什么样的关系。 vue组件中关系说明: 如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系； B与...
组件之间的通讯传值
m0_62351434的博客
02-10 357
一.父组件传到子组件 父组件是通过props属性给子组件通信的 数据是单向流动 父—>子 （子组件中修改props数据，是无效的，会有一个红色警告） 1. 父组件parent.vue代码如下： 父传子 在父组件的子组件标签上绑定一个属性，挂载要传输的变量。在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型} <template> <div class="paren
今天说说组件通信
qq_64207331的博客
09-04 133
今天分享到此结束 谢谢大家的支持
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值