Vue.js中实现父子组件通信的方式有哪些

这篇文章将为大家详细讲解有关Vue.js中实现父子组件通信的方式有哪些，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联公司专注于乌拉特中企业网站建设,响应式网站设计,成都商城网站开发。乌拉特中网站建设公司,为乌拉特中等地区提供建站服务。全流程按需策划，专业设计，全程项目跟踪，创新互联公司专业和态度为您提供的服务

1. Prop

英式发音：[prɒp]。这个在我们日常开发当中用到的非常多。简单来说，我们可以通过Prop 向子组件传递数据。用一个形象的比喻来说，父子组件之间的数据传递相当于自上而下的下水管子，只能从上往下流，不能逆流。这也正是 Vue 的设计理念之单向数据流。而 Prop 正是管道与管道之间的一个衔接口，这样水（数据）才能往下流。说这么多，看代码：

// Js let Child = Vue.extend({ template: '

', props: { content: { type: String, default: () => { return 'from child' } } } }) new Vue({ el: '#app', data: { message: 'from parent' }, components: { Child } })

你可以狠狠的戳这里查看Demo！浏览器输出：

from parent

2. $emit

英式发音：[iˈmɪt]。官方说法是触发当前实例上的事件。附加参数都会传给监听器回调。按照我的理解不知道能不能给大家说明白，先简单看下代码吧：

let Child = Vue.extend({ template: '

', 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') } } })

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 } })

// 全局变量 let EventBus = new Vue() // 子组件 let Child = Vue.extend({ template: '

child

', created () { console.log(EventBus.message) // -> 'hello' EventBus.$emit('received', 'from child') } }) new Vue({ el: '#app', components: { Child }, created () { // 变量保存 EventBus.message = 'hello' // 事件监听 EventBus.$on('received', function (val) { console.log('received: '+ val) // -> 'received: from child' }) } })

大橙子网站建设，新征程启航

Vue.js中实现父子组件通信的方式有哪些

{{ content }}

{{ foo }}

`parent foo`

son

child

其他资讯