vue两个组件间值的传递或修改方式
1、可以用公共的父组件来实现;
2、可以在store.js里面在设置公共变量;
3、也可以用本地存储localStorage.setItem()和localStorage.getItem(),通过修改本地存储的值和获取修改后的值来实现;
4、就是父子组件间的值的传递与修改props,这里需要注意的是子组件里面不 能直接修改props里面接受的值,需要定义一个中间变量来接受props里的值并修改,通过$emit即this.$emit('checkDisplay',this.displayChild);来传给父组件
5、也可以通过路由来传值query,params,
a、 //跳转页面并传值
this.$router.push({path:'/index',query:{name:'haha'}}) //获取传递过来的数据 this.$route.query.name
b、 或者是 //跳转页面并传值
要记住的是params只能用name跳转,如果用path来传值则传不过去 ,而且这种传值页面刷新后所传值将清空
this.$router.push({name:'index',params:{name:'nana'}}) //获取传递过来的数据 this.$route.params.name
c、也可以直接传值
this.$router.push('/index/'+item.name) //跳转页面并传值,不过这种传值前提需在路由里面在路径后面添加“/路径/:参数名” this.$route.params.参数名 //获取数据
但是这种方式会在地址栏显示数据,不安全
6、路径地址传值,params、query是什么?
params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params,及上面方法c
query:/router1?id=123 ,/router1?id=456 ,这里的id叫做query。和上面方法a同理
当你使用params方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用query方法,就没有这种限制,直接在跳转里面用就可以。
总结
以上所述是小编给大家介绍的vue两个组件间值的传递或修改方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
Vuejs第九篇之组件作用域及props数据传递实例详解
本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#Props 本教程是小编结合官方文档整理的一套更加细致,代码更多更全的教程,特别适合新手阅读. props数据传递 ①组件实例的作用域: 是孤立的,简单的来说,组件和组件之间,即使有同名属性,值也不共享. <div id="app"> <add></add> <del></del> </div> <sc
-
vue-router实现组件间的跳转(参数传递)
通过VueRouter来实现组件之间的跳转:参数的传递,具体内容如下 login ---用户名--->main ①明确发送方和接收方 ②配置接收方的路由地址 {path:'/myTest',component:TestComponent} --> {path:'/myTest/:id',component:TestComponent} ③接收方获取传递来的数据 this.$route.params.id ④跳转的时候,发送参数 this.$router.push('/myTest/20') &
-
vue组件中点击按钮后修改输入框的状态实例代码
最近写一个这样的页面 要求点击修改按钮之后部分输入框由禁用状态变为可用状态.我使用了vue中的事件处理器,但是不知道怎么获取disabled这个属性的值,所以以失败告终.后来又使用了vue中的v-bind,使其与class或者style绑定,但是也没有作用 <el-input id = "usernames" v-model="form.username" v-bind:style = {"disabled:isDisabled"}>
-
vue.js组件之间传递数据的方法
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件. // 注册一个子组件 Vue.component('child', { data: function(){ text: '我是fathe
-
Vue响应式添加、修改数组和对象的值
有些时候,不得不想添加.修改数组和对象的值,但是直接添加.修改后又失去了getter.setter. 由于 JavaScript 的限制, Vue 不能检测以下变动的数组: 1. 利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 2. 修改数组的长度时,例如: vm.items.length = newLength 为了避免第一种情况,以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果, 同时也将触发状
-
详解vue2父组件传递props异步数据到子组件的问题
测试环境:vue v2.3.3, vue v2.3.1 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-data="asyncData"></child> </div> </template> <script> import child from './child' export de
-
Vue 父子组件的数据传递、修改和更新方法
父子组件之间的数据关系,我这边将情况具体分成下面4种: 父组件修改子组件的data,并实时更新 子组件通过$emit传递子组件的数据,this.$data指当前组件的data(return{...})里的所有数据, this.$emit('data',this.$data); 之后通过父组件的getinputdata方法来接收数据 @data='getinputdata' 其中的data就是传过来的数据,通过修改这个数据就可以通过父组件实时更新子组件 getinputdata(data) { c
-
vue两个组件间值的传递或修改方式
1.可以用公共的父组件来实现: 2.可以在store.js里面在设置公共变量: 3.也可以用本地存储localStorage.setItem()和localStorage.getItem(),通过修改本地存储的值和获取修改后的值来实现: 4.就是父子组件间的值的传递与修改props,这里需要注意的是子组件里面不 能直接修改props里面接受的值,需要定义一个中间变量来接受props里的值并修改,通过$emit即this.$emit('checkDisplay',this.display
-
Vue中父子组件的值传递与方法传递
一.Vue中父组件向子组件传值 利用v-bind向子组件传值,子组件中利用props接受 <div id="app"> <father></father> </div> <template id="father"> <div> <!--注意点: 组件是可以使用自己的数据的--> <p>{{name}}</p> <p>{{age}}</p>
-
Vue实现兄弟组件间的联动效果
需求说明 如图,我想要实现当点击字母L,页面定位到L开头的城市名 Do it 1.找到字母表的页面 在html标签绑定一个click事件,在js中定义一个方法,并使用参数e获取点击的字母.当在页面点击时,console出来 效果如下 2.通过city这个父页面,进行列表页和字母表页面的值传递 <1>在字母表页定义一个监听方法 <2>进入city页面,在html中绑定一个监听事件 在js中编写这个事件的方法 打开页面,可以看到没有问题,city页面监听到了字母表页面的点击 <3
-
Vue如何实现组件间通信
1. 父子间通信 最常见的就是父子之间的通信,通信是双向的数据传递. 1.1 父组件 --> 儿子组件 父组件向儿子组件传递数据的方式就是 通过 Prop 向子组件传递数据. //child.vue <template> <div> 我是儿子,我收到来自父亲的数据为 {{value}} </div> </template> <script> export default { props:{ value: String } } //App.v
-
Vue两种组件类型:递归组件和动态组件的用法
一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> <div> <p>递归组件</p> <Recursion :count="count + 1" v-if="count < 3"></Recursion> </div> </template&g
-
vue两组件间值传递 $router.push实现方法
两组件间传值,可能包含多种情况,有父子组件和非父子组件,对于父子组件网上有很详细的方法讲解,但非父子组件传值有用bus总线,还有一些其他方法,其中的使用路由跳转的方法讲解太过简洁,难以理解.因为是公司项目,采用的是公司封装的UI框架,但基本上还是采用vue框架,ts编写.所以一些样式结构可能没有参考价值,但我会讲解清楚每一部分作用,主要是路由跳转部分的代码实现. 首先,需求如下图,树状列表每一项有一个编辑按钮,点击按钮之后跳转到另一个路由页面,会将树状列表中每一项数据带过来. vue文件部分:
-
vue之父子组件间通信实例讲解(props、$ref、$emit)
组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.那么组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础. //父组件 <template> <div> <h1>我是父组件!</h1> <child>
-
Vue中对数组和对象进行遍历和修改方式
目录 对数组和对象进行遍历和修改 1.对数组进行循环 2. 修改数组的时候,不能直接通过下标去增加修改删除 3.对对象进行循环 4.增加对象的时候 修改数组和对象的特殊情况以及修改方法 修改数组的两个特殊情况 修补方法 对数组和对象进行遍历和修改 1.对数组进行循环 v-for进行循环,有两个参数(item,index) 注意:template可以成为占位符,在DOM里面不显示 2. 修改数组的时候,不能直接通过下标去增加修改删除 (1)可以用过push/pop/shift/unshift/sp
-
vue对插件(iview,elementui,treeselect)样式的局部修改方式
目录 (iview,elementui,treeselect)样式的局部修改 学习描述 具体方法 vue+iview 样式穿透-修改第三方插件样式 修改第三方插件样式 (iview,elementui,treeselect)样式的局部修改 学习描述 在vue的使用过程中,我们知道插件的使用可以大大的提高我们的开发效率,这写插件都是经过很多人的验证和修改的,要比我们自己写方便的很多. 但是在开发的过程中,有些插件一些在特定的页面我们可能不要原来的样式,需要进行修改.然而我们在使用vue的过程中都会
-
vue中使用v-model完成组件间的通信
以上的两种方法,都是实现的单向数组传递,那如何实现两个组件之间的双向传递呢? 即,在父组件中修改了值,子组件会立即更新. 在子组件中修改了值,父组件中立即更新. vue中有一个很神奇的东西叫v-model,它可以完成我们的需求. 使用v-model过程中,父组件我们还是需要将子组件正常引入,只是传值方式改成了v-model 父组件 <template> <div> {{fatherText}} <Child v-model="fatherText">
随机推荐
- Laravel中获取路由参数Route Parameters的五种方法示例
- 解决AJAX请求中含有数组的办法
- 编写你的shell其实很简单
- shell脚本实现同时多台远程主机执行命令的代码分享
- jQuery将多条数据插入模态框的示例代码
- 深入浅析WinForm 进程、线程及区别介绍
- ASP常用源代码的总结(上)
- iOS开发之UIKeyboardTypeNumberPad数字键盘自定义按键
- C语言实现散列表(哈希Hash表)实例详解
- Android异步上传图片到PHP服务器
- 改变状态栏文字的js代码
- 利用RJB在Ruby on Rails中使用Java代码的教程
- PowerShell替换字符串操作符replace简明教程
- 基于javascript实现九九乘法表
- jQuery响应鼠标事件并隐藏与显示input默认值
- 详解javascript函数的参数
- EditText属性深入解析
- 用PHP实现的四则运算表达式计算实现代码
- Android Parcelable与Serializable详解及区别
- 基于vue-element组件实现音乐播放器功能