vuejs怎么设置父子通信
这篇文章主要介绍了vuejs怎么设置父子通信,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联公司是一家从事企业网站建设、成都网站建设、网站建设、行业门户网站建设、网页设计制作的专业网站建设公司,拥有经验丰富的网站建设工程师和网页设计人员,具备各种规模与类型网站建设的实力,在网站建设领域树立了自己独特的设计风格。自公司成立以来曾独立设计制作的站点近1000家。
vuejs设置父子通信的方法:1、父组件利用props向子组件传递数据;2、子组件通过“$emit”给父组件发送消息;3、利用“.sync”语法糖;4、利用“$attrs”和“$listeners”;5、利用privide和inject。
本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。
Vue 父子组件之间的通信有一下几种方式:
props
$emit -- 组件封装用的比较多
.sync -- 语法糖
$attrs 和 $listeners -- 组件封装用的比较多
privide 和 inject -- 高阶组件
下面将分别介绍
1、 props
这个在日常开发中运用较多,简单来说,我们可以通过props向子组件传递数据,就像一个水管一样,父组件的数据从上往下流向子组件,不能逆流。这也是vue的设计概论之单项数据流。
// Js let Child = Vue.extend({ template: '{{ content }}
', props: { content: { type: String, default: () => { return 'from child' } } } }) new Vue({ el: '#app', data: { message: 'from parent' }, components: { Child } })
2、$emit
官方介绍是触发当前实例上得事件,附加参数都会传给监听器回调。
let MyButton = Vue.extend({ template: '', data () { return { greeting: 'vue.js!' } }, methods: { triggerClick () { this.$emit('greet', this.greeting) } } }) new Vue({ el: '#app', components: { MyButton }, methods: { sayHi (val) { alert('Hi, ' + val) // 'Hi, vue.js!' } } })
3、.sync 修饰符
在vue1.x的时候,曾作为双向绑定功能存在,即子组件可以修改父组件中的值。因为它违反了单向数据流的设计理念,所以在vue2.x中被去掉了,但是在vue 2.3.0+以上的版本中又从新引入了这个 .sync 修饰符。但是只作为一个编译时的语法糖存在。它被扩展为一个自动更新父组件属性的 v-on 监听器。
在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。
语法糖的写法形式如下
于是我们可以用.sync 语法糖简写成如下形式
那么如何做到双向绑定呢,例如改变子组件文本框中的值同时改变父组件中的值,代码如下
let Login = Vue.extend({ template: `{{ userName }} `, props: ['name'], data () { return { text: '' } }, watch: { text (newVal) { this.$emit('update:name', newVal) } } }) new Vue({ el: '#app', data: { userName: '' }, components: { Login } })
代码里只有一句话:
this.$emit('update:name', newVal)
官方语法是:update:myPropName 其中 myPropName 表示要更新的 prop 值。当然如果你不用 .sync 语法糖使用上面的 .$emit 也能达到同样的效果
4、 $attrs 和 $listeners
官网对 $attrs 的解释如下:
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
官网对 $listeners 的解释如下:
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
$attrs 和 $listeners 属性像两个收纳箱,一个负责收纳属性,一个负责收纳事件,都是以对象的形式来保存数据
let Child = Vue.extend({ template: '{{ foo }}
', props: ['foo'], created () { console.log(this.$attrs, this.$listeners) // -> {bar: "parent bar"} // -> {two: fn} // 这里我们访问父组件中的 `triggerTwo` 方法 this.$listeners.two() // -> 'two' } }) new Vue({ el: '#app', data: { foo: 'parent foo', bar: 'parent bar' }, components: { Child }, methods: { triggerOne () { alert('one') }, triggerTwo () { alert('two') } } })
可以看到,我们可以通过 $attrs 和 $listeners 进行数据传递,在需要的地方进行调用和处理,还是很方便的。当然,我们还可以通过 v-on="$listeners" 一级级的往下传递,子子孙孙无穷尽也!
5、privide 和 inject
来看下官方对 provide / inject 的描述:
provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。并且这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。
let Son = Vue.extend({ template: 'son
', inject: { house: { default: '没房' }, car: { default: '没车' }, money: { // 长大工作了虽然有点钱 // 仅供生活费,需要向父母要 default: '¥4500' } }, created () { console.log(this.house, this.car, this.money) // -> '房子', '车子', '¥10000' } }) new Vue({ el: '#app', provide: { house: '房子', car: '车子', money: '¥10000' }, components: { Son } })
感谢你能够认真阅读完这篇文章,希望小编分享的“vuejs怎么设置父子通信”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
本文标题:vuejs怎么设置父子通信
URL链接:http://scyanting.com/article/giesee.html