首页 / VUE / Vue.js 父子组件通信的十种方式

Vue.js 父子组件通信的十种方式

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue.js 父子组件通信的十种方式，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8021字，纯文字阅读大概需要12分钟。

内容图文

面试官：Vue 中父子组件通信有哪些方式？

自己先想一分钟。

无可否认，现在无论大厂还是小厂都已经用上了Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。而且在面试当中也往往会问到关于 Vue 方面的各种问题，其中大部分面试官会问到如上这种问题。

最近一直在做 Vue项目代码层面上的优化，说实话，优化别人的代码真是件痛苦的事情，功能实现尚且不说，就说代码规范我就能再写出一篇文章来。真的是无规范不成方圆，规范这个东西太重要了！有点扯了，回到主题，咳咳，那就谈谈我对上面的面试题的理解吧，文笔有限，不妥之处，欢迎在文章结尾留言斧正啊，正啊，啊！

概述

几种通信方式无外乎以下几种：

Prop （常用）
$emit (组件封装用的较多)
.sync 语法糖（较少）
$attrs 和 $listeners (组件封装用的较多)
provide 和 inject （高阶组件/组件库用的较多）
其他方式通信

详述

下面逐个介绍，大神请绕行。

1. Prop

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

<div id="app">
 <child :content="message"></child>
</div>
// Js
let Child = Vue.extend({
 template: '<h2>{{ content }}</h2>',
 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]。官方说法是触发当前实例上的事件。附加参数都会传给监听器回调。按照我的理解不知道能不能给大家说明白，先简单看下代码吧：

<div id="app">
 <my-button @greet="sayHi"></my-button>
</div>

let MyButton = Vue.extend({
 template: '<button @click="triggerClick">click</button>',
 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 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

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

<text-document
 v-bind:title="doc.title"
 v-on:update:title="doc.title = $event">
</text-document>

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

<text-document v-bind:title.sync="doc.title"></text-document>

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

<div id="app">
 <login :name.sync="userName"></login> {{ userName }}
</div>

let Login = Vue.extend({
 template: `
  <div class="input-group">
   <label>姓名:</label>
   <input v-model="text">
  </div>
 `,
 props: ['name'],
 data () {
  return {
   text: ''
  }
 },
 watch: {
  text (newVal) {
   this.$emit('update:name', newVal)
  }
 }
})

new Vue({
 el: '#app',
 data: {
  userName: ''
 },
 components: {
  Login
 }
})

你可以狠狠的戳这里查看Demo!下面划重点，代码里有这一句话：

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 属性像两个收纳箱，一个负责收纳属性，一个负责收纳事件，都是以对象的形式来保存数据。看下面的代码解释：

<div id="app">
 <child 
  :foo="foo" 
  :bar="bar"
  @one.native="triggerOne"
  @two="triggerTwo">
 </child>
</div>

从 Html 中可以看到，这里有俩属性和俩方法，区别是属性一个是 prop 声明，事件一个是 .native 修饰器。

let Child = Vue.extend({
 template: '<h2>{{ foo }}</h2>',
 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')
  }
 }
})

你可以狠狠的戳这里查看Demo! 可以看到，我们可以通过 $attrs 和 $listeners 进行数据传递，在需要的地方进行调用和处理，还是很方便的。当然，我们还可以通过 v-on="$listeners" 一级级的往下传递，子子孙孙无穷尽也！

一个插曲！

当我们在组件上赋予了一个非Prop 声明时，编译之后的代码会把这些个属性都当成原始属性对待，添加到 html 原生标签上，看上面的代码编译之后的样子：

<h2 bar="parent bar">parent foo</h2>

这样会很难看，同时也爆了某些东西。如何去掉？这正是inheritAttrs 属性的用武之地！给组件加上这个属性就行了，一般是配合 $attrs 使用。看代码：

// 源码
let Child = Vue.extend({
 ...
 inheritAttrs: false, // 默认是 true
 ...
})

再次编译：

<h2>parent foo</h2>

5. provide / inject

他俩是对CP, 感觉挺神秘的。来看下官方对provide / inject 的描述：

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。并且这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

看完描述有点懵懵懂懂！一句话总结就是：小时候你老爸什么东西都先帮你存着等你长大该娶媳妇儿了你要房子给你买要车给你买只要他有的尽量都会满足你。下面是这句话的代码解释：

<div id="app">
 <son></son>
</div>

let Son = Vue.extend({
 template: '<h2>son</h2>',
 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
 }
})

你可以狠狠的戳这里查看Demo!

6. 其他方式通信

除了以上五种方式外，其实还有：

EventBus

思路就是声明一个全局Vue实例变量 EventBus , 把所有的通信数据，事件监听都存储到这个变量上。这样就达到在组件间数据共享了，有点类似于Vuex。但这种方式只适用于极小的项目，复杂项目还是推荐 Vuex。下面是实现 EventBus 的简单代码：

<div id="app">
 <child></child>
</div>

// 全局变量
let EventBus = new Vue()

// 子组件
let Child = Vue.extend({
 template: '<h2>child</h2>',
 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'
  })
 }
})

你可以狠狠的戳这里查看Demo!

Vuex

官方推荐的，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

$parent

父实例，如果当前实例有的话。通过访问父实例也能进行数据之间的交互，但极小情况下会直接修改父组件中的数据。

$root

当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。通过访问根组件也能进行数据之间的交互，但极小情况下会直接修改父组件中的数据。

broadcast / dispatch

他俩是 vue@1.0 中的方法，分别是事件广播和事件派发。虽然 vue@2.0 里面删掉了，但可以模拟这两个方法。可以借鉴 Element 实现。有时候还是非常有用的，比如我们在开发树形组件的时候等等。

总结

以上所述是小编给大家介绍的Vue.js 父子组件通信的十种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

内容总结

以上是互联网集市为您收集整理的Vue.js 父子组件通信的十种方式全部内容，希望文章能够帮你解决Vue.js 父子组件通信的十种方式所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/334360.html

来源：【匿名】

【上一篇】vue组件中的样式属性scoped实例详解【下一篇】php怎么返回数据给vue

更多 ►

【Vue.js 父子组件通信的十种方式】教程文章相关的互联网学习教程文章

Vue子组件向父组件通信，父组件向子组件通信【代码】【图】

首先，子组件代码如下<template><div style="border:1px solid black;width:400px;"><h3>我是子组件里的</h3><button>点击按钮子组件传递父组件</button><div>我是父组件传子组件显示的:我还没有值</div></div> </template> <script> export default {data() {return {};},components: {},methods: {} }; </script>父组件代码如下<template><div style="border:1px solid red;padding:2rem;width:500px;margin:50px auto;"><h3>我...

vue.js组件之间通讯--父组件调用子组件的一些方法，子组件暴露一些方法，让父组件调用【代码】

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"></div></body><script src="node_modules/vue/dist/vue.js"></script><script> //父亲调用子组件的方法，子组件暴露一些方法让父组件调用 // ref如果写在dom上，表示获取dom，如果写在组件上，表示当前组件的实例 let vm=new Vue({ el:"#app", template:‘<child ref="c"></child>‘,...

vue父组件访问子组件【代码】

1、父组件(父组件访问子组件的方法drop）  <template><div id="parent"><shopcart v-ref:shopcart></shopcart></div> </template> <script>export default {methods:{_drop(target) {// 体验优化,异步执行下落动画this.$nextTick(() => {//this.$refs.shopcart访问子组件（target是子组件中传过来的当前操作的元素对象） this.$refs.shopcart.drop(target);});},}} </script>2、子组件...

vue通俗易懂的子组件向父组件传值【图】

不多BB直接上图：如上图：为子组件绑定点击事件如上图：send方法触发父组件绑定的事件如上图：为父组件绑定触发事件@myEvent="aa"aa方法接受子组件传过来的值原文：http://www.cnblogs.com/dujunfeng/p/7991970.html

vuex 子组件传值【代码】【图】

Vuex官网地址：https://vuex.vuejs.org/zh/guide/ 步骤一：安装vuex npm install vuex --save 步骤二：简单使用构建核心仓库store.jsVuex 应用的状态 state都应当存放在store.js 里面，Vue 组件可以从 store.js 里面获取状态，可以把 store 通俗的理解为一个全局变量的仓库。但是和单纯的全局变量又有一些区别，主要体现在当 store 中的状态发生改变时，相应的 vue 组件也会得到高效更新src 目录下创建一个 vuex 目录，vuex下创建...

vue中父组件向子组件传值

<div id="app"> {{msg}} <logn v-bind:fuzujian="msg" ></logn> app控制的区域为父组件 logn为私有的子组件 </div> <script> var vm = new Vue({ el:"#app", data:{ msg:"这是父组件的内容" }, methods: {}, components:{ data(){ return{ info:"<h1 >这是私有组件的data值</h1>", ...

vue 中父组件中给子组件的根元素注册点击事件【图】

正常我们给组件注册事件是先在子组件的里面监听事件，然后通过$emit向外层触发给父组件，然后再在父组件中接收事件，这样做有点啰嗦，vue提供了 .native修饰符，我们可以直接在父组件通过 .native修饰符来给子组件注册事件，如下：原文：https://www.cnblogs.com/lyt0207/p/12103791.html

小谢第11问：vue中，子组件获取的值怎么传给父组件【代码】

代码中，Helloword是子组件<template><div class="index"><Header></Header><HelloWorld></HelloWorld><button @click="goPro">跳转</button></div> </template> mounted(){console.log(this.$children) }用ref绑定子组件，在父组件中通过$refs取对应的值或者方法<HelloWorld ref="hello"></HelloWorld>this.$refs.hello.属性 this.$refs.hello.方法原文：https://www.cnblogs.com/xieoxie3000question/p/13031054.html

Vue子组件调用父组件的方法【代码】

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template><div><child></child></div> </template> <script>import child from ‘~/components/dam/child‘;export default {components: {child},methods: {fatherMethod() {console.log(‘测试‘);}}}; </script>子组件<template><div><button @click="childMethod()">点击</button></div> </template> <script>export default {methods: {childMetho...

vue 父组件向子组件传输数据，需要注意 :parentmsg需要绑定才能获取msg

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet"> <link ...

vue2.0:子组件调用父组件

main.js文件添加如下：new Vue({ router, render: h => h(App),data: { eventHub: new Vue() }}).$mount(‘#app‘); 父组件：监听事件:this.$root.eventHub.$on(‘cart.add‘, (target) => { this._drop(target); });子组件：触发事件：this.$root.eventHub.$emit(‘cart.add‘, event.target); 原文：http://www.cnblogs.com/jhuang-com/p/6810283.html

Vue 子组件接收父组件的值

1.父组件<template><div id="rightmenu8"><rightmenu7 ref="rightmenu7" @child="parent3" :age="age"></rightmenu7> </div></template><script>import rightmenu7 from "./RightMenu7.vue";export default { name: "rightmenu8",data() {return { age:18}},methods: {},components: {rightmenu7: rightmenu7}};</script> 2.子组件 <template><div id="rightmenu7" ></div></template><script>export default {props:[‘age‘...

Vue——父、子组件之间的传值、传方法【代码】【图】

父组件向子组件传值<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head> <body><div id="app"><com1 :parentmsg=‘msg‘></com1><!-- 父组件，可以在引用子组件的时候，通过属性绑定（v-bind:）的形式, 把需要传递给子组件的数据，以属性绑定的形式...

VUE 子组件向父组件传值 , 并且触发父组件方法(函数)【代码】

目标:封装一个搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数>1.子组件1 　　　<div> 2 　　　　　<input v-model="listQuery.keyword"> 3 <span>筛选搜索</span> 4 <el-button @click="search" >查询搜索</el-button> 5 </div>methods: {search(){//this.$emit(‘父组件名称‘,传到父组件的参数);this.$emit(‘searchListZ‘, this.listQuery);this.$parent.getList(...

Vue的踩坑集? —— 父组件传值给子组件，子组件改变值后再传回去【代码】

一个基本的父传子demoparent.vue<template><div><Child text="hi"></Child></div> </template><script>import Child from ‘./child.vue‘ export default {components:{Child} } child.vue<template><div>{{text}}</div> </template><script>export default {props:{text:{type:String,default:‘hello world‘}}} </script> （重点已标记）那么如果在子组件中改变从父组件传过来的值并且再传回去呢~??parent.vue <template><d...

首页 / VUE / Vue.js 父子组件通信的十种方式

Vue.js 父子组件通信的十种方式

内容导读

内容图文

内容总结

内容备注

内容手机端

【Vue.js 父子组件通信的十种方式】教程文章相关的互联网学习教程文章

组件 - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程