vue实现两个组件之间数据共享和修改操作


Posted in Javascript onNovember 12, 2020

我们在使用vue开发过程中会遇到这样的情况,在父组件中引入了子组件,需要将父组件的值传到子组件中显示,同时子组件还可以更改父组件的值。

以我目前的一个项目的开发为例,如下图页面:

vue实现两个组件之间数据共享和修改操作

在父组件中,我引入了两个子组件,一个是左边的导航栏,还有中间的一个富文本编译器组件,当我点击左边导航栏时,中间的页面会切换,也就是改变引入的子组件。

怎么实现呢,首先,设置在该页面index.vue中设置一个变量index,左边导航栏每一项也对应一个index值,导航菜单绑定select函数,@select="handleSelect",@是v-on的简写。

handleSelect函数接收到参数,然后发射出去,再由父组件接收就可以了。

handleSelect(key, keyPath) {
  console.log(key, keyPath);
  this.changeIndex(keyPath[1])
  },
  changeIndex:function(key) {
  this.$emit("IndexChanged",key)
  }

this.$emit("IndexChanged",key)就是将key的值传到一个叫IndexChanged函数中,

在index.vue绑定IndexChanged接收值,<Aside v-on:IndexChanged="change($event)"> </Aside>然后调用change函数,注意$event是固定写法,接收的就是子页面传过来的key。然后就可以通过这个key改变index用来切换页面了。

下面通过一个更加简单直观的例子讲解一下,新建一个Test.vue:

<template>
 <div id="app">
 
 </div>
</template>
<script>
 export default{
 name:'Test',
 mounted() {

 },
 }
</script>

<style>
</style>

再建一个Test2.vue:

<template>

</template>

<script>
 export default {
 name: "Test2"
 }
</script>

<style scoped>
</style>

Test.vue是父组件,Test2.vue是子组件,下面先给Test配置路由,以便在浏览器上可以访问,为Test2定义模板,可以在Test中使用。

在router/index.js中添加下面代码

import Test from "../components/Test";
Vue.use(Router)

export default new Router({
 mode: 'history',
 routes: [
{
 path: '/t',
 name: 'Test',
 component: Test
 }
 ]
})

在main.js中,添加下面代码:

import Test2 from "./components/Test2";

Vue.use(Test2)
new Vue({
 el: '#app',
 router,
 components: {
 App,
 
 "Test2":Test2

 },

 template: '<App/>'
})

现在在test2页面写上这样一句,

<template>
<div>
 {{text2}}
</div>
</template>

<script>
 export default {
 name: "Test2",
 data(){
  return{
  text2:"这是Test2页面"
  }
 }

 }
</script>
<style scoped>

</style>

在test中引入test2,同时也定义一个变量text,然后显示在页面上,代码如下:

<template>
 <div id="app">
 {{text1}}
 <Test2></Test2>

 </div>
</template>
<script>

 import Test2 from "./Test2";
 export default{
 name:'Test',
 components: {Test2},
 data(){
  return{
  text1:"这是Test1页面"
  }
 },
 mounted() {
 },
 }
</script>

<style>
</style>

浏览器访问http://localhost:8080/t,页面如下:

vue实现两个组件之间数据共享和修改操作

现在要实现Test2接收Test1的值并显示:

绑定数据用v-bind

<Test2 v-bind:text1="text1"></Test2>

传的数据是Test页面的text1,命名也是text1,可以不同,但接收时的名字和第一个要相同。

Test2页面要接收数据啊,通过props接收:

props: ['text1'],

接收之后可以把它传给text2,也可以直接在页面显示:

<template>
<div>
 {{text2}}
 {{text1}}
</div>
</template>

<script>
 export default {
 name: "Test2",
 props: ['text1'],
 data(){
  return{
  text2:"这是Test2页面"
  }
 }

 }
</script>

<style scoped>
</style>

vue实现两个组件之间数据共享和修改操作

接收到text1值了,怎么同步更改呢,需要再绑定一个函数,如下:

<Test2 v-bind:text1="text1" v-on:textChanged="change($event)"></Test2>
....
methods: {
  change(msg){
  this.text1 = msg;
  }

 },

在test2中,将值发射到textChanged就可以了

mounted() {
  this.$emit("textChanged","我改了text1的值")
 }

vue实现两个组件之间数据共享和修改操作

补充知识:在vue中使用vuex,修改state的值

1、 安装 vuex

npm install vuex -S

2、在目录下创建store文件

vue实现两个组件之间数据共享和修改操作

3、 在store.js编辑一个修改state的方法

vue实现两个组件之间数据共享和修改操作

然后在mian.js中全局引入

vue实现两个组件之间数据共享和修改操作

最后在组件中使用

vue实现两个组件之间数据共享和修改操作

这个的功能是运用mutations 修改state中的值

以上这篇vue实现两个组件之间数据共享和修改操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
基于jQuery选择器的整理集合
Apr 26 Javascript
用js控制组织结构图可以任意拖拽到指定位置
Jan 17 Javascript
alert和confirm功能介绍
May 21 Javascript
javascript基本类型详解
Nov 28 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
微信小程序项目实践之验证码倒计时功能
Jul 18 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
vue各种事件监听实例(小结)
Jun 24 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 #Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 #Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 #Javascript
在vue中使用image-webpack-loader实例
Nov 12 #Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 #Javascript
JavaScript ES 模块的使用
Nov 12 #Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 #Javascript
You might like
Windows下安装Memcached的步骤说明
2010/04/25 PHP
设定php简写功能的方法
2019/11/28 PHP
Javascript 自适应高度的Tab选项卡
2011/04/05 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
vue 权限认证token的实现方法
2018/07/17 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
2018/10/10 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
2019/10/31 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
小程序双头slider选择器的实现示例
2020/03/31 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
使用python画社交网络图实例代码
2019/07/10 Python
python爬虫基础知识点整理
2020/06/02 Python
pyx文件 生成pyd 文件用于 cython调用的实现
2021/03/04 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
毕业生求职自荐书范文
2014/03/27 职场文书
幼儿园课题方案
2014/06/09 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
教师节倡议书2015
2015/04/27 职场文书
新学期家长寄语2016
2015/12/03 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
Pyhton爬虫知识之正则表达式详解
2022/04/01 Python