Vue组件通信深入分析

Vue组件通信几种方式 Vue组件通信实现 2022-11-13 14:11:52 772人浏览独家记忆

摘要

目录一、组件间的通信方式分类二、props传递数据三、$emit 触发自定义事件四、ref标记五、EventBus事件总线六、$parent 或 $root七、Vuex八、总结一、组

一、组件间的通信方式分类

父子组件之间的通信；
兄弟组件之间的通信；
祖孙与后代组件之间的通信；
非关系组件之间的通信。

二、props传递数据

适用场景：父组件传递数据给子组件；

子组件设置props属性，定义接收父组件传递过来的参数；
父组件在使用子组件标签中通过字面量来传递值

Person.vue

<template>
  <div>
    Person
    <Student1 name="jack" age="18"></Student1>
    </div>
</template>
<script>
import Student1 from './Student1'
export default {
    name: 'Person',
    components: {
        Student1,
    },
</script>

Student1.vue

<template>
  <div>
    Student1
    {{name}},{{age}}
  </div>
</template>
<script>
export default {
    name: 'Student1',
    props: {
        name: String,
        age:Number,
    }
}
</script>

效果

三、$emit 触发自定义事件

适用场景：子组件传递数据给父组件
子组件通过 $emit触发自定义事件，$emit第二个参数为传递的数值;
父组件绑定监听器获取到子组件传递过来的参数。

Student1.vue

<template>
  <div>
    Student1
    <button @click="giveData()">点我传递数据</button>
  </div>
</template>
<script>
export default {
    name: 'Student1',
    methods: {
        giveData() { 
            this.$emit('add', '12345');
        }
    },
}
</script>

Person.vue

<template>
  <div>
    Person
    <Student1 @add="cartAdd($event)"></Student1>
    </div>
</template>
<script>
import Student1 from './Student1'
export default {
    name: 'Person',
    components: {
        Student1,
    },
    methods: {
        cartAdd(event) { 
            console.log(event);
        }
    },
}
</script>

四、ref标记

使用场景：子组件传递数据给父组件
父组件在使用子组件的时候设置ref
父组件通过设置子组件ref来获取数据

<template>
  <div>
    Person
    <Student2 ref="foo"></Student2>
    <button @click="getRef()">点击获取ref数据</button>
  </div>
</template>
<script>
import Student2 from "./Student2";
export default {
  name: "Person",
  components: {
    Student2,
  },
  methods: {
    getRef() {
      console.log(this.$refs.foo);
    },
  },
};
</script>

效果

五、EventBus事件总线

使用场景：任意组件传值
创建一个中央事件总线EventBus
兄弟组件通过$emit触发自定义事件，$emit第二个参数为传递的数值
另一个兄弟组件通过$on监听自定义事件

main.js

beforeCreate() {
  Vue.prototype.$bus = this
}

Student2.vue

<template>
  <div>
    Student2
    <button @click="getBus()">点我获取全局事件总线数据</button>
  </div>
</template>
<script>
export default {
  name: 'Student2',
  data() {
    return {
      name: 'fanafan',
      age:'17'
    }
  },
  methods:{
    getBus(){
      this.$bus.$emit('bus',this.name)
    }
  }
}
</script>

Student1.vue

mounted() {
    this.$bus.$on('bus', (data) => { 
        console.log(data)
    })
},

六、$parent 或 $root

使用方法类似全局事件总结

Vue.prototype.$parent = this

// 传数据
this.$parent.$emit('parent',this.age)
//接数据
this.$parent.$on('parent', (data) => {
    console.log(data);
})

七、vuex

使用场景：复杂关系的组件数据传递
Vuex是一个用来存储共享变量的容器
state：用来存放共享遍历的地方；
getter：可以增加一个getter派生状态，用来获得共享变量的值；
mutations：用来存放修改state的方法；
actions也是用来存放修改state的方法，不过action是在mutations的基础上进行的。常用来做一些异步操作。

八、总结

父——>子：props；
子——>父：$emit,ref；
兄弟——>兄弟，任意——>任意：$bus。
复杂关系：vuex。

到此这篇关于Vue组件通信深入分析的文章就介绍到这了,更多相关Vue组件通信内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue组件通信深入分析

本文链接: https://www.lsjlt.com/news/171884.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

Vue组件通信深入分析

目录一、组件间的通信方式分类二、props传递数据三、$emit 触发自定义事件四、ref标记五、EventBus事件总线六、$parent 或 $root七、vuex八、总结一、组...

99+

2022-11-13

Vue组件通信几种方式 Vue组件通信实现
Vue组件通信的示例分析

这篇文章主要介绍Vue组件通信的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！实践方法由于更换新的框架，我们的项目由Avalon更新成Vue.但是为了兼容以前的业务代码，不能...

99+

2024-04-02
深入了解Vue组件七种通信方式

目录1.props/$emit简介代码实例2.v-slot简介代码实例3.$refs/ $parent/$children/$root简介代码实例4.$attrs/$listener...

99+

2024-04-02
Vue函数式组件专篇深入分析

函数式组件的实现相对容易。一个函数式组件本质上就是一个普通函数，该函数的返回值是虚拟DOM。在用户接口层面，一个函数式组件就是一个返回虚拟DOM的函数，如下面的代码所示： func...

99+

2023-01-05

Vue函数式组件样式 Vue函数式组件 Vue函数式组件使用场景
Vue组件及父子组件通信的示例分析

这篇文章将为大家详细讲解有关Vue组件及父子组件通信的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。什么是组件？vue中的组件其实就是页面组成的一部分，好比是电脑...

99+

2024-04-02
怎样深入了解Vue组件七种通信方式

怎样深入了解Vue组件七种通信方式，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。vue组件通信的方式，这是在面试中一个非常高频的问题，我刚开始找实习便经常遇到这个问题，当时只知...

99+

2023-06-22
Vue中父子组件通信与事件触发的深入讲解

目录一、组件子组件父组件二、父子组件通信父组件给子组件通信子组件向父组件通信三、父子组件事件触发父组件调用子组件中的事件方法子组件调用父组件中的事件方法四、总结一、组件子组件 &l...

99+

2024-04-02
Vue组件通信之父传子与子传父深入探究

目录为什么要组件拆分组件拆分的流程子组件中为什么要使用defineComponent方法父传子父组件子组件子传父子组件父组件provide和inject方法传递数据的组件子组件孙子组...

99+

2022-12-08

Vue组件通信几种方式 Vue组件通信实现
Vue组件间的通信方式详析

目录前言组件之间通信的场景父子组件之间的通信父组件通过 prop 向子组件传递数据子组件通过自定义事件向父组件传递数据兄弟组件之间的通信状态提升隔代组件之间的通信attrs/attr...

99+

2024-04-02
Angualr组件间通信的示例分析

这篇文章主要介绍Angualr组件间通信的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！Angualr 组件间通信约定：遵循Angular官方的说法，下文中的Angular...

99+

2024-04-02
React组件通信浅析

目录1、函数式组件2、类式组件1、函数式组件 <script type="text/babel"> // 1. 创建函数式组件 function Demo() {...

99+

2022-12-26

React组件 React组件通信
angular父子组件通信的示例分析

这篇文章主要介绍angular父子组件通信的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！用到的apiInput - 子组件中定义可接受的属性，可以用来父组件给子组件传递数据Output - 子组件中定义输出...

99+

2023-06-22
Vue父子组件之间事件通信示例解析

目录前言示例解析总结前言组件间传值的章节我们知道父组件给子组件传值的时候，使用v-bind的方式定义一个属性传值，子组件根据这个属性名去接收父组件的值，但是假如子组件想给父组件一些...

99+

2023-03-19

Vue父子组件事件通信 Vue父子组件通信 Vue事件通信
vue如何实现组件通信

这篇文章主要介绍vue如何实现组件通信，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！前言在vue中，组件的关系不外乎以下三种：组件是需要通信的，在开发中，常用到的通信方式有：vuex、eventBus、以及prop...

99+

2023-06-29
Vue组件间怎么通信？六种方式浅析

Vue组件间怎么通信？下面本篇文章给大家介绍一下Vue组件通信的六种方式，希望对大家有所帮助！组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有几种关系.针对...

99+

2023-05-14

组件通信前端 Vue.js
Android组件Activity的启动过程深入分析

目录前言源码分析总结前言 Activity是Android中一个很重要的概念，堪称四大组件之首，关于Activity有很多内容，比如生命周期和启动Flags，这二者想要说清楚，恐怕又...

99+

2023-05-15

Android Activity启动过程 Android Activity启动方法
vue2.0父子组件间通信的示例分析

这篇文章主要介绍了vue2.0父子组件间通信的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。1.父组件传递数据给子组件父组件数据如何...

99+

2024-04-02
Vue怎么用父组件向子组件通信

本文小编为大家详细介绍“Vue怎么用父组件向子组件通信”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue怎么用父组件向子组件通信”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。props组件实例的作用域是孤立的...

99+

2023-07-04
Vue如何实现组件间通信

目录1. 父子间通信1.1 父组件 --> 儿子组件1.2 儿子组件 --> 父组件2. 爷孙间通信3. 任意组件间通信3.1 EventBus3.2 Vuex1. 父子...

99+

2024-04-02
vue3组件间怎么通信？通信方式浅析

在我们写 vue3 的项目中，我们都会进行组件通信，我们除了使用 pinia 公共数据源的方式除外，我们还可采用那些更简单的API方法呢？那下面我就来给大家介绍介绍几种父子组件和子父组件通信的方式。1、父子组件通信1.1 definePro...

99+

2023-05-14

组件通信 Vue