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 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
Firebug入门指南(Firefox浏览器)
Aug 21 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
node.js require() 源码解读
Dec 13 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
学习Angularjs分页指令
Jul 01 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
解决element UI 自定义传参的问题
Aug 22 Javascript
详解为什么Vue中不要用index作为key(diff算法)
Apr 04 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
《PHP边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
jQuery实现的超简单点赞效果实例分析
2015/12/31 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
JS浏览器BOM常见操作实例详解
2020/04/27 Javascript
jquery实现简单自动轮播图效果
2020/07/29 jQuery
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
把项目从Python2.x移植到Python3.x的经验总结
2015/04/20 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Python基于列表模拟堆栈和队列功能示例
2018/01/05 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
解决pyshp UnicodeDecodeError的问题
2019/12/06 Python
Python小白垃圾回收机制入门
2020/06/09 Python
python利用os模块编写文件复制功能——copy()函数用法
2020/07/13 Python
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
妇联领导班子剖析材料
2014/08/21 职场文书
政风行风评议心得体会
2014/10/21 职场文书
债务纠纷代理词
2015/05/25 职场文书
导游词之张家界
2019/10/31 职场文书
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫