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 相关文章推荐
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
js实现自定义进度条效果
Mar 15 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
vue.js中created方法作用
Mar 30 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
微信小程序云开发之云函数详解
May 16 Javascript
JavaScript实现密码强度实时验证
Mar 18 Javascript
javascript绘制简单钟表效果
Apr 07 Javascript
vue实现简单加法计算器
Oct 22 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 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
CodeIgniter基本配置详细介绍
2013/11/12 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
PHP基本语法实例总结
2016/09/09 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
PHP截取发动短信内容的方法
2017/07/04 PHP
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
功能完善的小程序日历组件的实现
2020/03/31 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
基于python判断目录或者文件代码实例
2019/11/29 Python
完美解决Django2.0中models下的ForeignKey()问题
2020/05/19 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
干部培训自我鉴定
2014/01/22 职场文书
五年级音乐教学反思
2014/02/06 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
职务任命书范本
2014/06/05 职场文书
八一建军节演讲稿
2014/09/10 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
安装工程师岗位职责
2015/02/13 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL
JUnit5常用注解的使用
2021/07/02 Java/Android
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL