一、前言

引用自vue.js官网：

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

组件化开发是vue非常重要的一个特征，组件是相互独立的，但是许多的组件需要结合在一起，才能组成我们的大型应用，在构建过程中，组件之间必须通过通信，也就是传参来实现页面的功能。

二、父子组件传参

props / $emit

props

这是最常见的父组件向子组件的传参方式，父组件在调用子组件时，通过v-bind ( : )来传递个子组件参数，子组件通过props接收。
例如：

父组件Father.vue：

<template><div><Son :msg="msg"></Son></div>
</template><script>
//父组件中引入子组件
import Son from "./Son";
export default {name: "Father",//负组件中声明引用的组件components:{Son},data(){return{msg: 'Hello World!'}}
}
</script><style scoped></style>

子组件Son.vue：

<template><div><p>来自父组件的msg: {{ msg }}</p></div>
</template><script>
export default {name: "Son",props:{msg:{//参数类型type: String,//默认值default: 'There is no message from Father',//是否必须required: false}}
}
</script><style scoped></style>

$emit

vue是单向数据流：

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

父组件Father.vue:

<template><div id="app"><Son v-on:changeMsg="changeMsg" ></Son><!--    <Son @changeMsg="changeMsg" ></Son> --><h1>{{ msg }}</h1></div>
</template>
<script>
import Son from "./Son";
export default {name: 'Father',components:{Son},data(){return{msg: '这是父组件自己的值！'}},methods:{changeMsg(e){this.msg = e;}},
}
</script>

子组件Son.vue：

<template><header><button @click="changeMsg">点我向父组件传值！</button></header>
</template>
<script>
export default {name: 'Son',data() {return {}},methods:{changeMsg() {//第一个参数为自定义事件名称 后面的参数是传递的函数的参数this.$emit("changeMsg","子向父组件传传递的msg");}}
}
</script>

点击子组件中的按钮，触发changeMsg事件：

子组件emit中的事件名称应该与父组件调用子组件时绑定的事件名称一致，但是调用的父组件中实际的函数可以不与它们二者名称一样。

三、兄弟组件传参

$emit / $on

这种方法通过一个空的 Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。

核心：
$on定义一个事件，并且指定事件的执行对象（函数）
$emit是可以触发了$on定义的事件的

 var Event=new Vue();Event.$emit(事件名,数据);Event.$on(事件名,data => {});

创建一个空的Vue实例 - Event组件，类似于中间人（BUS）。

传递数据的组件中调用Event.$emit(事件名,数据);

接收数据的组件中调用Event.$on(事件名,data => {});，其中data就为传递的参数。

四、爷孙组件$attrs/ $listeners

常用于爷孙组件或者祖孙组件之间通信。

多级组件嵌套需要传递数据时，通常使用的方法是通过 vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex处理，未免有点大材小用。为此 Vue2.4 版本提供了另一种方法---- $ attrs/$ listeners

即子组件中使用v-bind="$attrs"可以直接接收祖先组件的传递属性，这样就不必通过props接收传递的参数，而且可以接收父组件以上的组件传递下来的参数。

vue官网对于inheritAttrs的属性解释：如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。
也就是我们希望子组件默认继承祖先组件的属性是，可以设置 inheritAttrs: false。（默认为true）

五、使用Vuex通信

Vuex 实现了一个单向数据流，在全局拥有一个 State 存放数据，当组件要更改 State 中的数据时，必须通过 Mutation 进行，Mutation 同时提供了订阅者模式供外部插件调用获取 State数据的更新。
而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走 Action，但 Action 也是无法直接修改State 的，还是需要通过 Mutation 来修改 State 的数据。最后，根据 State 的变化，渲染到视图上。

关于vuex的知识可以去看看我vue专栏中的vuex学习博客。

Vue学习 — vue组件通信相关推荐

vue学习笔记 - 组件通信01
组件是vue最核心的功能,组件化你的前端页面,能大大的提高重用性,让代码可复用,维护起来简直爽的飞起,举例来说就比如一些评论输入框. 在vue中使用组件 Vue.component('input-nu ...
Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
Vue学习（组件传参）-学习笔记
文章目录 Vue学习(组件传参)-学习笔记父到子子到父父操作子-ref(类似于操作dom) 兄弟之间传参 Vue学习(组件传参)-学习笔记父到子 Father:(index) <temp ...
Vue学习（组件的定义及调用、路由）-学习笔记
文章目录 Vue学习(组件的定义及调用.路由)-学习笔记 Vue学习(组件的定义及调用.路由)-学习笔记可见代码参考学习:https://gitee.com/monkeyhlj/vue-learni ...
day4 vue 学习笔记组件生命周期数据共享数组常用方法
系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记过滤器侦听器计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记组件生命 ...
Vue 非父子组件通信方案
Vue 非父子组件通信方案概述在 Vue 中模块间的通信很普遍如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
Vue 非父子组件通信（ref）
Vue 非父子组件通信 (ref) 流程:1. 先在son子组件中定义一个数据和事件处理程序data( ) { return { flag: false }} , methods: { cry( ) ...
Vue的父子组件通信(十种)
设计的面试题 Vue中父子组件通信有哪些方式? 概述通信方式无外乎就那几种: Prop 常用$emit 组件封装用的较多.sync 语法糖 (较少)$attrs和$listeners(组件封装用的较 ...
html中的父子通信代码,Vue.js 父子组件通信的十种方式
面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟. 无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多.真的是前端开发人员必备 ...

Vue学习 — vue组件通信

目录

一、前言

二、父子组件传参

props / $emit

props

$emit

三、兄弟组件传参

$emit / $on

四、爷孙组件$attrs/ $listeners

五、使用Vuex通信

Vue学习 — vue组件通信相关推荐

最新文章

热门文章

Vue学习 — vue组件通信

目录

一、 前言

二、父子组件传参

props / $emit

props

$emit

三、兄弟组件传参

$emit / $on

四、爷孙组件$attrs/ $listeners

五、使用Vuex通信

Vue学习 — vue组件通信相关推荐

最新文章

热门文章

一、前言