菜单

Vue组件通讯的四种艺术集中_vuewww.2138.com

2020年3月27日 - www.2138.com

前言

举世瞩目vue是一种mvvm框架,它相对于jquery只怕非常大的差距点之一就在于组件之间的通讯了。本文敬性格很顽强在艰难险阻或巨大压力面前不屈是梳理了前五个,父亲和儿子组件通讯和eventBus通讯,小编感到Vue文书档案里的印证可能有部分粗略,笔者要好第一回是没看驾驭。

老爹和儿子组件的通讯 非老爹和儿子组件的eventBus通讯 利用本土缓存完毕组件通信Vuex通讯

首先种通讯形式:父子组件通讯

父组件向子组件传递数据

父组件一共要求做4件事

1.import son from './son.js'www.2138.com, 引入子组件 son

2.在components : {"son"}里登记全部子组件名称

3.在父组件的template应用子组件, “

4.要是急需传递数据给子组件,就在template模板里写 “

 // 1.引入子组件 import counter from './counter' import son from './son'

// 2.在ccmponents里注册子组件 components : { counter, son },

// 3.在template里使用子组件 

 // 4.如果需要传递数据,也是在templete里写 

1.用props选用多少,就能够向来动用数据

2.子组件选用到的数额,不可能去修正。假诺您真的供给修改,能够用总结属性,也许把数据赋值给子组件data里的贰个变量

 // 1.用Props接受数据 props: [ 'num' ],

// 2.如果需要修改得到的数据,可以这样写 props: [ 'num' ], data () { return { number : this.num } },

子组件向父组件传递数据

父组件一共必要做2件事情

在template里定义事件

在methods里写函数,监听子组件的风云触发

// 1. 在templete里应用子组件时,定义事件changeNumber  

// 2. 用changeNumber监听事件是否触发 methods: { changeNumber{ console.log; this.number = e }, }

子组件一共须求1件业务

在数量变动后,用$emit触发即可

// 1. 子组件在数据变化后,用$emit触发即可,第二个参数可以传递参数 methods: { increment(){ this.number++ this.$emit('changeNumber', this.number) }, }

其次种通讯方式: eventBus

eventBus这种通讯格局,针没错黑白父亲和儿子组件之间的通讯,它的准则依然经过事件的触发和监听。

唯独因为黑白父亲和儿子组件的关联,他们须求有六在那之中间组件来连接。

本人是接纳的经过在根组件,也正是#app组件上定义了二个怀有组件都足以访问到的零构件,具体应用方法如下

行使eventBus传递数据,大家合并须求做3件业务

1.给app组件增添Bus属性
(那样具备组件都得以经过this.$root.Bus访问到它,何况无需引入任何文件卡塔尔国

2.在组件1里,this.$root.Bus.$emit接触事件

3.在组件2里,this.$root.Bus.$on监听事件

// 1.在main.js里给app组件,添加bus属性import Vue from 'vue'new Vue({ el: '#app', components: { App }, template: '', data(){ return { Bus : new Vue

// 2.在组件1里,触发emitincrement(){ this.number++ this.$root.Bus.$emit('eventName', this.number) },

// 3.在组件2里,监听事件,接受数据mounted(){ this.$root.Bus.$on('eventName', value => { this.number = value console.log},

其两种通讯形式: 利用localStorage可能sessionStorage

这种通讯比较容易,短处是数码和状态相比较散乱,不太轻便保险。

通过window.localStorage.getItem获取数据

通过window.localStorage.setItem 存款和储蓄数据

注意:JSON.parse做多少格式转换。

第两种通讯格局: 利用Vuex

Vuex比较复杂,可以独立写一篇

总结

以上正是那篇小说的全部内容了,希望本文的剧情对大家的就学大概干活具备自然的参照他事他说加以考查学习价值,假如有疑问大家能够留言交流,多谢我们对剧本之家的支撑。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图