当前位置:首页 > vue.js技术文章 > vue2.0组件之间传值、通信的多种方式(干货)

vue2.0组件之间传值、通信的方式总结

  • 发布时间:
  • 作者:码农之家原创
  • 点击:106

这篇文章主要知识点是关于vue2.0、组件传值、vue2.0 子组件改变props值,并向父组件传值的方法 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下相关资源

Vue.js前端开发:快速入门与专业应用

本书分为10章,包括简介、基础特性、指令、过滤器、过渡、组件、状态管理、常用插件、工程实例和Weex打包。本书从简单的单个实例和基础语法,到工程实例,将系统地讲述Vue.js在项目中的

查看详情

vue2.0组件之间传值、通信的多种方式(干货)

Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单。这次我们就来聊一聊vue2.0组件之间传值、通信的多种方式。

一、通过路由带参数进行传值

①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件、钩子函数等)

this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B

②在B组件中获取A组件传递过来的参数

this.$route.query.orderId

二、通过设置 Session Storage缓存的形式进行传递

①两个组件A和B,在A组件中设置缓存orderData

const orderData = { 'orderId': 123, 'price': 88 }
sessionStorage.setItem('缓存名称', JSON.stringify(orderData))

②B组件就可以获取在A中设置的缓存了

const orderData = { 'orderId': 123, 'price': 88 }
sessionStorage.setItem('缓存名称', JSON.stringify(orderData))const orderData = { 'orderId': 123, 'price': 88 }
sessionStorage.setItem('缓存名称', JSON.stringify(orderData))

此时 dataB 就是数据 orderData

朋友们可以百度下 Session Storage(程序退出销毁) 和 Local Storage(长期保存) 的区别。

三、父子组件之间的传值

(一)父组件往子组件传值props

①定义父组件,父组件传递 number这个数值给子组件,如果传递的参数很多,推荐使用json数组{}的形式

vue2.0组件之间传值、通信的多种方式(干货)

②定义子组件,子组件通过 props方法获取父组件传递过来的值。props中可以定义能接收的数据类型,如果不符合会报错。

vue2.0组件之间传值、通信的多种方式(干货)

③假如接收的参数 是动态的,比如 input输入的内容 v-model的形式

注意:传递的参数名称不识别驼峰命名,推荐使用横杠-命名

vue2.0组件之间传值、通信的多种方式(干货)

vue2.0组件之间传值、通信的多种方式(干货)

(二)、子组件往父组件传值,通过emit事件

vue2.0组件之间传值、通信的多种方式(干货)

vue2.0组件之间传值、通信的多种方式(干货)

四、不同组件之间传值,通过eventBus(小项目少页面用eventBus,大项目多页面使用 vuex)

①定义一个新的vue实例专门用于传递数据,并导出

vue2.0组件之间传值、通信的多种方式(干货)

②定义传递的方法名和传输内容,点击事件或钩子函数触发eventBus.emit事件

vue2.0组件之间传值、通信的多种方式(干货)

③接收传递过来的数据

注意:enentBus是一个另一个新的Vue实例,区分两个this所代表得vue实例

vue2.0组件之间传值、通信的多种方式(干货)

五、vuex进行传值

为什么使用vuex?

vuex主要是是做数据交互,父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父子组件),或者大型spa单页面框架项目,页面多并且一层嵌套一层的传值,异常麻烦,用vuex来维护共有的状态或数据会显得得心应手。

需求:两个组件A和B,vuex维护的公共数据是 餐馆的名称 resturantName,默认餐馆名称是 飞歌餐馆,那么现在A和B页面显示的就是飞歌餐馆。如果A修改餐馆名称 为 A餐馆,则B页面显示的将会是  A餐馆,反之B修改同理。这就是vuex维护公共状态或数据的魅力,在一个地方修改了数据,在这个项目的其他页面都会变成这个数据。

vue2.0组件之间传值、通信的多种方式(干货)vue2.0组件之间传值、通信的多种方式(干货)

①首先新建一个 sotre文件夹,分开维护 actions mutations getters

vue2.0组件之间传值、通信的多种方式(干货)

②在index.js文件中新建vuex 的store实例

*as的意思是 导入这个文件里面的所有内容,就不用一个个实例来导入了。

vue2.0组件之间传值、通信的多种方式(干货)

③在main.js中导入 store实例

vue2.0组件之间传值、通信的多种方式(干货)

④在组件A中,定义点击事件,点击 修改 餐馆的名称,并把餐馆的名称在事件中用参数进行传递。

...mapactions 和 ...mapgetters都是vuex提供的语法糖,在底层已经封装好了,拿来就能用,简化了很多操作。

其中...mapActions(['clickAFn']) 相当于this.$store.dispatch('clickAFn',{参数}),mapActions中只需要指定方面即可,参数省略。

...mapGetters(['resturantName'])相当于this.$store.getters.resturantName

vue2.0组件之间传值、通信的多种方式(干货)

    B组件同理

vue2.0组件之间传值、通信的多种方式(干货)

⑤actions中的操作,为了方便理解,ES6的箭头函数换成了比较好理解的函数,commit提交到mutations中

vue2.0组件之间传值、通信的多种方式(干货)

⑥mutations,mutations值所有vuex步骤中唯一能改变数据的操作,在其他步骤修改都是非法的。

在此步骤中,把组件中传递过来的  餐馆名称赋值给了vuex共同维护的状态 resturantName,这时所有的resturantName都变成了餐馆A

vue2.0组件之间传值、通信的多种方式(干货)

⑦在getter中获取最终的状态

vue2.0组件之间传值、通信的多种方式(干货)

⑧在计算属性中,渲染最终的数据 resturantName

vue2.0组件之间传值、通信的多种方式(干货)

总结

以上所述是小编给大家介绍的vue2.0组件之间传值、通信的多种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

vue2.0 子组件改变props值,并向父组件传值的方法

为什么我们会有修改 prop 中数据的冲动呢?通常是这两种原因:

prop 作为初始值传入后,子组件想把它当作局部数据来用;

prop 作为初始值传入,由子组件处理成其它数据输出。

对这两种原因,正确的应对方式是:

定义一个局部变量,并用 prop 的值初始化它:

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

定义一个计算属性,处理 prop 的值并返回。

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop

是一个对象或数组,在子组件内部改变它会影响父组件的状态。

我们知道,父组件是使用 props 传递数据给子组件,但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了。 https://cn.vuejs.org/v2/guide/components.html#自定义事件

在父组件中定义两个变量,动态绑定到子组件中

vue2.0 子组件改变props值,并向父组件传值的方法

vue2.0 子组件改变props值,并向父组件传值的方法

子组件:

vue2.0 子组件改变props值,并向父组件传值的方法

vue2.0 子组件改变props值,并向父组件传值的方法

vue2.0 子组件改变props值,并向父组件传值的方法

父组件:定义两个方法,并绑定到子组件自定义事件上

vue2.0 子组件改变props值,并向父组件传值的方法

vue2.0 子组件改变props值,并向父组件传值的方法

以上这篇vue2.0 子组件改变props值,并向父组件传值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到vuex的实例用法教程、 Vue2实现组件props双向绑定、 vue中的watch监听数据变化及、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:vue中怎样设置、获取、删除cookie

下一篇:vue-cli项目中缩短首屏加载时间实例

展开 +

收起 -

vue2.0组件传值 相关内容
Vue2.0利用 v-model 实现组件props双向绑定的实例解决方法

本篇文章主要介绍了Vue2 利用 v-model 实现组件props双向绑定的优美解决方案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。

查看详情
vue2.0+vuex的日期选择组件功能实现方法

这篇文章主要介绍了 基于vue2.0+vuex的日期选择组件功能实现,详细介绍了使用vue编写的日期组件,,非常具有实用价值,需要的朋友可以参考下。

查看详情
前端工程师必备技能:Vue移动开发实战技巧

Vue.js是一个渐进式的JavaScript 框架,与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。作为201

查看详情
Vue.js快速入门

目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。

查看详情
Vue.js实战

尤雨溪推荐 随书附赠示例代码下载资源 vue社区iView组件贡献者 前端大神梁灏编写 突出实战 应用为王 大鹏展趐 鹰击长空 Vue.js实战助你攀上前端之巅

查看详情
Vue企业开发实战

本书以Vue.js 2为基础,以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。

查看详情
Vue.js项目实战

Vue实用、灵便、更快,为搭建详细的当代Web运用出示了需要的全部作用,其渐进式的特性也让开发人员可以轻轻松松入门,发布后快速获得了前端工程师工作人员的亲睐。这书由Vue.js关键精英

查看详情
Spring Boot+Vue全栈开发实战

传统的JavaEE开发效率低下、配置臃肿、调试不便,严重制约了程序员的生产力。Spring Boot致力于简化开发配置,并为企业级开发提供一系列非业务性功能;而Vue则采用数据驱动视图的方式将程序

查看详情
vue2.0组件传值 学习笔记
网友NO.730165

vue实现组件之间传值功能示例

本文实例讲述了vue实现组件之间传值功能。分享给大家供大家参考,具体如下: slot标签: 想向封装好结构的组件中插入内容,需要借助 slot/slot 在组件之中进行关联:如 模板中: slot name='txt'/slot 组件调用中: p slot='txt'/p 注:如果只有slot上面每一定义name属性,则只能有一个slot div class='box' com p slot='txt'/p /com/divtemplate id="c" div slot name="txt"/slot /div/template Vue.component('com',{ template:"#c"}) 父组件向子组件传值 : props 父组件: template child :parent-msg='a'/child/template 子组件: child:{ template:'#chi' props:['parentMsg']} 子组件向父组件的传值: vue只运行数据的单选传递,在子组件向父组件的传值中,需要事件触发 子组件: template div @click="up"/div/template methods:{ up(){ this.$emit('fn','msg') // 主动触发fn方法,msg是需要传递的数据 }} 父组件: div child @fn="getval"/child/div methods:{ get……

网友NO.922885

在vue中实现简单页面逆传值的方法

【需求】 要实现的需求很简单,页面从A - B,用户在B触发操作,将一些数据带回到A页面,在网上找了好久也只看到有人问,但总找不到很好答案。要实现的效果图如下: 【联想】 在 ios 开发中,页面跳转 A - B - C,到 C 页面后,内存中一直存储着 A 和 B 页面的数据和状态,通过导航堆栈遍历数组可以拿到之前的页面进行修改赋值等,另外还有代理,block传值等操作。 vue是一个单页应用,轻量,并且不会重复下载数据。当它从一个页面跳转到另一个页面时,原来的页面的vue实例和相关数据已经销毁了,要实现逆传值就要找到操作的对象及它的一些属性。 【尝试】 在 three 页面中打印路由相关信息,如下: 本来是想在其对象中查看是否有可操作的对象,但发现都不好操作甚至太麻烦,并不像 ios 中一样。然后尝试对其中一些对象 prototype 或 __proto__ 主动添……

网友NO.772538

Vue.js中兄弟组件之间互相传值实例

兄弟组件之间互相传值,需要建立一个“中转站”(新的vue实例),并且需要主动触发。 实例上的$on方法来接受监听。 !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" title组件传值/title script src="vue.js"/script/headbody div id="box" child1/child1 child2/child2 /div template id="c1" h1~~~~~~我是哥哥~~~~{{msg}} button @click='fn'点击/button/h1 /template template id="c2" h3~~~~~~我是弟弟~~~~{{msg2}}/h3 /template/body/htmlscript var Hub=new Vue(); // 1) 中转站,其中不需要设置任何参数 var vm=new Vue({ el: '#box', components:{ child1:{ template:'#c1', data:function(){ return { msg: 'hello' } }, methods:{ fn:function(){ // 2) 主动触发监听(中转站触发监听) console.log(this.msg); //hello Hub.$emit('change',this.msg) //$emit触发监听方法 } } }, child2:{ template:'#c2', data:function(){ return { msg2: 'world' } }, // 创建完成 new Vue create mount // 钩子函数 created(){ // 3) 接收监听 $on('事件名……

网友NO.774794

vue组件通信传值操作示例

本文实例讲述了vue组件通信传值操作。分享给大家供大家参考,具体如下: 父子组件通信: 子组件 template div h3 @click="alerrt" 我是子组件一/h3 span{{parentMessage}}/span /div/templatescript export default{ props: ['parentMessage'], mounted() { // this.$emit('childEvent'); }, methods:{ alerrt(){ this.$emit('childEvent',{name:'zhangsan',age:10 }); } } }/scriptstyle scoped/style 父组件 template div h2父组件/h2 span父组件传递消息给子组件/span br router-view @childEvent="parentMethod" :parentMessage="parentMessage" / !-- Child-one :parentMessage="parentMessage"/Child-one -- button type="" @click='extendTest'extend/button div id="extend"/div /div/templatescript import ChildOne from './ChildOne' export default{ components: { ChildOne }, methods: { parentMethod({name,age}) { alert(this.parentMessage); console.log(this.parentMessage,name,age); }, extendTest() { console.log('333'); var Extend = Vue.extend({ template: 'p{{firstName}} {{l……

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757