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 document.referrer 用法
Apr 30 Javascript
jquery 框架使用教程 AJAX篇
Oct 11 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
Feb 22 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
Oct 12 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
微信小程序textarea层级过高的解决方法
Mar 04 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
js基于div丝滑实现贝塞尔曲线
Sep 23 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
coreseek 搜索英文的问题详解
2013/06/08 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
2011/03/10 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
Javascript函数的参数
2015/07/16 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
JavaScript中的 new 命令
2019/05/22 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
ES6函数实现排它两种写法解析
2020/05/13 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
python计算二维矩形IOU实例
2020/01/18 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
创业计划书中要认真思考的问题
2013/12/28 职场文书
银行员工职业规划范文
2014/01/21 职场文书
运动会获奖感言
2014/02/11 职场文书
领导调研接待方案
2014/02/27 职场文书
合伙经营协议书范本
2014/04/18 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
2014年实验室工作总结
2014/12/03 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
Python实现位图分割的效果
2021/11/20 Python
把77A收信机改造成收音机
2022/04/05 无线电