Vue组件之间数据共享浅析
目录
- 组件数据共享
- 父组件向子组件共享数据
- 子组件向父组件共享数据
- 兄弟组件共享数据
组件数据共享
组件之间的关系：在项目开发中，组件之间的最常用的关系分为两种：父子关系和兄弟关系。
父组件向子组件共享数据
通过自定义属性实现父向子传值。
子组件向父组件共享数据
通过自定义事件实现子向父传值
兄弟组件共享数据
在 vue2.x中，兄弟组件之间数据共享方案是 EventBus。
EventBus的使用步骤：
1）创建eventBus.js模块，并向外共享一个Vue的实例对象
import Vue from 'vue' // 向外共享 Vue 的实例对象 export default new Vue()
2）在数据发送方，调用bus.$emit('事件名称',要发送的数据)方法触发自定义事件
<template>
<div class="left-container">
<h3>Left组件--{{count}}</h3>
<button @click="send">点击给Right发送数据</button>
</div>
</template>
<script>
// 1.导入 eventBus.js 模块
import bus from './eventBus'
export default{
data(){
return {
// 兄弟组件要传送的数据
str:'我想对你说：hello world'
}
},
methods:{
send(){
// 2.通过eventBus来发送数据
bus.$emit('share',this.str)
}
}
}
</script>
<style lang="less" scoped>
h3{
color: #f00;
}
.left-container{
padding: 0 20px 20px;
background-color: orange;
min-height: 250px;
flex: 1;
}
::v-deep h5{
color:#00f
}
</style>
3）在数据接受方，调用bus.$on('事件名称',事件处理函数)方法注册一个自定义事件
<template>
<div class="right-container">
<h3>Right组件</h3>
{{msgFromLeft}}
</div>
</template>
<script>
// 1.导入 eventBus.js 模块
import bus from './eventBus'
export default{
data(){
return {
// 兄弟组件要接受的数据
msgFromLeft:""
}
},
created(){
bus.$on('share',val=>{
this.msgFromLeft = val
// console.log('在Right组件中定义的share被触发了！',val);
})
}
}
</script>
<style>
.right-container{
padding: 0 20px 20px;
background-color: orange;
min-height: 250px;
flex: 1;
}
</style>
到此这篇关于Vue组件之间数据共享浅析的文章就介绍到这了,更多相关Vue组件数据共享内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
vue实现两个组件之间数据共享和修改操作
我们在使用vue开发过程中会遇到这样的情况,在父组件中引入了子组件,需要将父组件的值传到子组件中显示,同时子组件还可以更改父组件的值. 以我目前的一个项目的开发为例,如下图页面: 在父组件中,我引入了两个子组件,一个是左边的导航栏,还有中间的一个富文本编译器组件,当我点击左边导航栏时,中间的页面会切换,也就是改变引入的子组件. 怎么实现呢,首先,设置在该页面index.vue中设置一个变量index,左边导航栏每一项也对应一个index值,导航菜单绑定select函数,@select="hand
-
Vue.js中使用Vuex实现组件数据共享案例
当组件中没有关联关系时,需要实现数据的传递共享,可以使用Vuex 先不管图片 一.安装 在vue cli3中创建项目时勾选这个组件就可以了 或者手动安装 npm install store --save 二.使用 main.js store.js .vue文件 图片中的js文件中有 三部分 分别与图片上对应 1. state中存储数据 2. 而数据的修改需要先经过action的dispatch方法 (不需要异步获取的数据可以不经过这一步,如上图) 3. 然后经过matations的commit方
-
Vue中组件的数据共享分析讲解
目录 组件之间的关系 父子组件之间的数据共享 兄弟组件之间的数据共享 EventBus的使用步骤 组件之间的关系 在项目开发中,组件之间的最常见的关系分为两种 父子关系 兄弟关系 父->子共享数据 父组件向子组件共享数据需要使用自定义属性. 父子组件之间的数据共享 父组件: <template> <div id="app"> <h1>app根组件</h1> <left :msg="message" :use
-
Vue vuex配置项和多组件数据共享案例分享
目录 getters 配置项 mapState.mapGetters mapActions.mapMutations 多组件共享数据 没有看过上一篇的同学可以查看: Vue Vuex搭建vuex环境及vuex求和案例分享 getters 配置项 index.js 中增加 getters 配置项 //准备getters,用于将state中的数据进行加工 const getters = { bigSum(state){ return state.sum*10 } }
-
Vue局部组件数据共享Vue.observable()的使用
随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况. 创建store对象 首先创建一个 store.js,包含一个 store和一个 mutations,分别用来指向数据和处理方法. //store.js import Vue from
-
Vuex(多组件数据共享的Vue插件)搭建与使用
目录 1.概念 2.何时使用 3.搭建Vuex环境 4.Vuex使用 5.getters的使用 6.四个map方法的使用 7.模块化+命名空间 总结 1.概念 在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态(数据)进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信. 2.何时使用 多个组件需要共享数据时. 3.搭建Vuex环境 1.创建文件:src/store/index.js //引入Vue核心库 import Vue from
-
Vue组件之间的数据共享详解
目录 一.在项目开发中,组件之间的最常见的关系分为如下两种: 1.1 父子组件之间的数据共享 1. 父 -> 子共享数据 2.子 -> 父共享数据 1.2 兄弟组件之间的数据共享 总结 一.在项目开发中,组件之间的最常见的关系分为如下两种: 1.父子关系 2.兄弟关系 1.1 父子组件之间的数据共享 父子组件之间的数据共享又分为: 1. 父 -> 子共享数据 子组件: 父组件: 2.子 -> 父共享数据 子组件向父组件共享数据使用自定义事件.示例代码如下 子组件: 父组件: 页面显
-
Vue组件之间数据共享浅析
目录 组件数据共享 父组件向子组件共享数据 子组件向父组件共享数据 兄弟组件共享数据 组件数据共享 组件之间的关系:在项目开发中,组件之间的最常用的关系分为两种:父子关系和兄弟关系. 父组件向子组件共享数据 通过自定义属性实现父向子传值. 子组件向父组件共享数据 通过自定义事件实现子向父传值 兄弟组件共享数据 在 vue2.x中,兄弟组件之间数据共享方案是 EventBus. EventBus的使用步骤: 1)创建eventBus.js模块,并向外共享一个Vue的实例对象 import Vue
-
vue组件之间通信实例总结(点赞功能)
本文实例讲述了vue组件之间通信.分享给大家供大家参考,具体如下: 总结: 父组件-->子组件 ①通过属性 步骤1: <son myName="michael" myPhone='123'></son> <son :myName="userList[0]"></son> 步骤2: Vue.component('son',{ props:['myName','myPhone'] }) ②通过$parent 直接在子
-
vue组件之间通信方式实例总结【8种方式】
本文实例总结了vue组件之间通信方式.分享给大家供大家参考,具体如下: 对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的各种方式的总结,总共有8种方式. 1. props和$emit 父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的. Vue.component('child',{ data(){ return { mymessage:this.message } }, template:` <div> <in
-
详解Vue组件之间通信的七种方式
使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下. 父子组件之间的通信 1)props和$emit 父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作 具体代码如下: ``` // 父组件 <template> <div> <h3>props和$emit</h3> <Children v-on:changeMsg="changeMsg"
-
用react-redux实现react组件之间数据共享的方法
上篇文章写到了redux实现组件数据共享的方法,但是在react中,redux作者提供了一个更优雅简便的模块实现react组件之间数据共享.那就是利用react-redux 利用react-redux实现react组件数据之间数据共享 1.安装react-redux $ npm i --save react-redux 2.从react-redux导入Prodiver组件将store赋予Provider的store属性, 将根组件用Provider包裹起来. import {Provider,c
-
深入理解Vue 组件之间传值
一.父组件向子组件传递数据 在 Vue 中,可以使用props向子组件传递数据. 子组件部分: 这是 header.vue 的 HTML 部分,logo 是在 data 中定义的变量. 如果需要从父组件获取 logo 的值,就需要使用props: ['logo'] 在 props 中添加了元素之后,就不需要在 data 中再添加变量了 父组件部分: 在调用组件的时候,使用 v-bind 将 logo 的值绑定为 App.vue 中定义的变量 logoMsg 然后就能将App.vue中 logoM
-
vue组件之间数据传递的方法实例分析
本文实例分析了vue组件之间数据传递的方法.分享给大家供大家参考,具体如下: 1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sexVal = '男' 把该值传递给 子组件(B.vue),如下: App.vue <template> <div id="app"> <!--<router-view>&
-
vue组件之间的数据传递方法详解
(1)props属性: 在父组件中,可以通过子组件标签属性的形式将数据或者函数传给子组件,子组件通过props去读取父组件传过来的数据 用法 父组件传数据给子组件: 一般的属性值都是用来给子组件展示的 子组件传数据给父组件 属性值为函数类型的,一般是用来子组件向父组件传递数据,子组件通过调用父组件传过来的函数,可以修改父组件的状态数据 缺点: 隔层组件间传递: 必须逐层传递(麻烦) 兄弟组件间: 必须借助父组件(麻烦) 注意: //子组件获取父组件传过来的值 props: { obj: {//o