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 MyButton = Vue.extend({ template: 'click', 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!' } } })

你可以狠狠的戳这里查看Demo! 大致逻辑是酱婶儿的：当我在页面上点击按钮时，触发了组件 MyButton 上的监听事件 greet ，并且把参数传给了回调函数 sayHi 。说白了，当我们从子组件Emit（派发）一个事件之前，其内部都提前在事件队列中On（监听）了这个事件及其监听回调。其实相当于下面这种写法：

vm.$on('greet', function sayHi (val) {
 console.log('Hi, ' + val)
})
vm.$emit('greet', 'vue.js')
// => "Hi, vue.js"

3. .sync 修饰符

这个家伙在 vue@1.x 的时候曾作为双向绑定功能存在，即子组件可以修改父组件中的值。因为它违反了单向数据流的设计理念，所以在 vue@2.0 的时候被干掉了。但是在 vue@2.3.0+ 以上版本又重新引入了这个.sync 修饰符。但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。说白了就是让我们手动进行更新父组件中的值了，从而使数据改动来源更加的明显。下面引入自官方的一段话：

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

既然作为一个语法糖，肯定是某种写法的简写形式，哪种写法呢，看代码：

于是我们可以用 .sync 语法糖简写成如下形式：

废话这么多，如何做到“双向绑定” 呢？让我们进段广告，广告之后更加精彩！ ... 好的，欢迎回来。假如我们想实现这样一个效果：改变子组件文本框中的值同时改变父组件中的值。怎么做？列位不妨先想想。先看段代码：


  {{ userName }}

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

其他资讯