@Author：Runsen
@Date：2020/7/4

人生最重要的不是所站的位置，而是内心所朝的方向。只要我在每篇博文中写得自己体会，修炼身心；在每天的不断重复学习中，耐住寂寞，练就真功，不畏艰难，奋勇前行，不忘初心，砥砺前行，人生定会有所收获，不留遗憾（作者：Runsen ）

作者介绍：Runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，Python， Java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在CSDN。决定今天比昨天要更加努力。我的征途是星辰大海！

今天进入vue-router和组件Component关系和通信的学习。vue 通信也是面试中非常高频的问题，有很多面试题，都是围绕通信展开。

文章目录

组件关系
- 父子关系
- 兄弟组件
props
emit

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

Props（常用）
$emit (组件封装用的较多)
$attrs 和 $listeners (组件封装用的较多)
provide 和 inject （高阶组件/组件库用的较多）

先让Runsen开始组件关系

组件关系

父子关系

父子关系即是组件 A 在它的模板中使用了组件 B，那么组件 A 就是父组件，组件 B 就是子组件。

<script>// 注册一个子组件Vue.component('child', {data() {return {text:"我是father的子组件"}},template:"<span>{{text}}</span>"})// 注册一个父组件Vue.component('father', {// 在模板中使用了child组件template:"<div><child></child></div>"})
</script>

兄弟组件

两个组件互不引用，则为兄弟组件

<script>// 注册一个兄弟组件Vue.component('borther1', {data() {return {text:"我是borther1"}},template:"<span>{{text}}</span>"})// 注册一个兄弟组件Vue.component('borther2', {data() {return {text:"我是borther2"}},template:"<span>{{text}}</span>"})
</script>

跨级组件：就是在父子关系中，中间跨了很多个层级。

组件的构成：一个再复杂的组件，都是由三部分组成的： prop、 event、 slot，它们构成了 Vue.js 组件的 API。

props

props用于子组件接收来自父组件传递的数据。父组件可以将一条数据传递给子组件，这条数据可以是动态的，父组件的数据更改的时候，子组件接收的也会变化。

子组件被动的接收父组件的数据,子组件不要再更改这条数据了。

我们先看一个简单的案例，代码来自菜鸟教程

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body><div id="app"><child message="hello!"></child>
</div>
<script>
// 注册
Vue.component('child', {// 声明 propsprops: ['message'],// 同样也可以在 vm 实例中像 "this.message" 这样使用template: '<span>{{ 0 }}</span>'#  template: '<span>{{ message }}</span>' 和上句完全一样
})
// 创建根实例
new Vue({el: '#app'
})
</script>

子组件需要显式地用 props 选项声明 “prop”，这里message就是prop。在对应的模板中使用message属性就可以传参。

下面我们看一个子组件从Vue实例中的data传参。

<body><div id="app"><child :message="myMessage"></child>
</div>
<script>
// 注册
Vue.component('child', {// 声明 propsprops: ['message'],template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({el: '#app',data() {return {myMessage:"hello world"}},
})
</script>

:message表明是从实例中的data取值，取值前，需要在注册的时候声明 props。

emit

接下来，我们就学习子组件→父组件通信。

相比父→子组件通信，子→父组件就稍微繁琐一点。我们会使用到组件的一个知识点：自定义事件。

每一个vue实例都实现了事件接口，我们可以用它提供的API $emit( eventName)来触发一个事件。

我先把标准代码给出。

<body><div id="app"><son @connect="say"></son></div><script>Vue.component('son', {template: `<button @click="send">点击</button>`,methods: {send() {this.$emit('connect');}}});const app = new Vue({el: "#app",methods: {say() {console.log(`大家好，我监听到了事件connect的触发`);}}});</script>
</body>

注册子组件，就是一个按钮button，点击它的时候，会触发组件内部的send( )方法，而方法体里面会触发一个事件，事件名取名为：“connect”。

然后我们就去父组件监听这个事件‘connect’，监听方式跟普通原生的事件一模一样，也是用 v-on 指令，缩写用@符号，我们采用缩写来监听。

我们设置了事件connect触发的处理程序是一个say( )方法，我们补上say( )方法的定义：

下面就是代码的最终效果

总结：父组件 A 通过 props 参数向子组件 B 传递数据，B 组件通过$emit向A组件发送一个事件（携带参数数据），A组件中监听$emit 触发的事件得到 B 向 A 发送的数据。

、

三十七、深入Vue.js组件Component（下篇）相关推荐

三十六、深入Vue.js组件Component（上篇）
@Author:Runsen @Date:2020/6/15 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
构建你的第一个Vue.js组件
我记得当时我拿起CakePHP,我很喜欢,开始使用它是多么容易.这些文档不仅结构合理,详尽无遗,而且用户友好.多年以后,这正是我在Vue.js中感受到的.然而,与Cake相比,Vue文档仍然缺少一件事 ...
Vue.js组件化开发实践
Vue.js组件化开发实践前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一 ...
VUE.JS 组件化开发实践
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 前言公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模 ...
（25）Vue.js组件通信—父组件向子组件传值
一.Vue.js组件通信介绍子组件如何获取父组件中的数据?父组件如何得知子组件的数据变更?如果是更加复杂的组件关系呢?在组件间传递数据的操作,称为组件通信. 二.Vue.js组件通信内容 • 父组件 ...
（24）Vue.js组件—组件注册
一.Vue.js组件注册内容 • 全局注册 • 组件基础 • 局部注册二.全局注册 • 全局注册的组件在注册后可以用于任意实例或组件中. <body><div id="a ...
如何使用@vue/cli 3.0在npm上创建，发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
推送近期三波关于Vue.js的资讯
原文来自:集web前端最近很火的vue2框架资源:定时更新,欢迎Star一下. 推送自己整理近期三波关于Vue.js的资讯: 这里就抛砖引玉了,望有更屌的资源送助攻. 第一波 vue-js-toggl ...
vue.js 组件之间传递数据 1
vue.js 组件之间传递数据框架浏览数:437 2017-8-21 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据 ...

三十七、深入Vue.js组件Component（下篇）