组件 & 组件通讯
:::warning 注意
阅读本文章之前，你应该先要了解 ESM 模块化的 import export，如需要请查看 ESM 模块化。
:::
上一篇有介绍到什么是组件化，就是把一个页面拆分成若干个小模块，然后重新组成一个页面。其中的每个小模块就是对应一个 .vue 文件。在组件的使用上我们还需要注意组件的引入和调用的命名方式，以及组件之间的数据是如何传递的。
组件注册
组件在使用之前必须要先注册。注册后才能够使用该组件。
<template>
<div class="hello">
<!-- 调用组件 -->
<MyChildren></MyChildren>
<!-- 或者简化写法 -->
<MyChildren />
</div>
</template>
<script>
import MyChildren from './MyChildren.vue' // 引入组件
export default {
components: { MyChildren } // 注册组件
}
</script>
组件命名
组件的命名一般有两种，上面的例子中就是属于第一种，PascalCase 大写驼峰的形式。第二种是 kebab-case 小写横杠形式。
<template>
<div class="hello">
<!-- 调用组件 -->
<my-children></my-children>
<!-- 或者简化写法 -->
<my-children />
</div>
</template>
<script>
import MyChildren from './my-children.vue' // 引入组件
export default {
components: { MyChildren } // 或者简化写法
}
</script>
当使用 kebab-case 注册一个组件时，你只能使用 kebab-case 形式进行调用组件，例如 <my-component-name />
当使用 PascalCase 注册一个组件时，你可以使用 PascalCase 或者 kebab-case 形式进行调用组件。例如 <my-component-name /> 或者 <MyComponentName />
组件通讯
组件通讯分为父子组件通讯、兄弟组件通讯、祖孙组件通讯。本章重点介绍父子组件通讯。
以上面的例子继续讲解。
Props
props 是用来接收父组件传递过来的静态/动态数据。
Home.vue
<template>
<div class="hello">
<MyChildren name="xiaoming" :age="age" />
</div>
</template>
<script>
import MyChildren from 'MyChildren.vue'
export default {
components: { MyChildren },
data() {
return {
age: 18
}
}
}
</script>
MyChildren.vue
<template>
<div class="my-children">
{{ name }}
{{ age }}
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: ''
},
age: {
type: Number,
default: 0
}
}
}
</script>
通过上面的例子可以看到父组件 Home.vue 向子组件 MyChildren.vue 传递了 name 和 age 属性。子组件如果想要使用该属性，就必须在 props 选项中进行接收。
Props 接收的语法有几种，分别是数组、对象的形式。推荐使用对象形式，并且设置默认值。
Props 语法
使用字符串数组的形式。
<script>
export default {
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
}
</script>
但是，通常都会希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些 property 的名称和值分别是 prop 各自的名称和类型。
<script>
export default {
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
}
</script>
如果设置了每个 prop 的类型，但是你没有按照规定的类型传递数据进来，Vue 会在浏览器的控制台中发出警告。
单向数据流
单向数据流指的是数据的流向是从父组件流向子组件，从上往下流。父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
一个尝试修改 props 值的错误示范
<template>
<div class="base-header">我修改了 props 的值 {{ age }}</div>
</template>
<script>
export default {
props: {
age: {
type: Number,
default: 0
}
},
mounted() {
this.age = 100
}
}
</script>
单向数据流其实很好理解的，当一个父组件里面有 n 个子组件，并且分别给 n 个子组件传递了同一个 age 属性，在每个子组件中都进行修改了 age。那么展示的时候以谁改的为准呢？因为父组件和 n 个子组件是共享了 age ，所以一个地方改了 age 那么大家展示的时候都一起被改了。
在举例一个糟糕的情况，一个父组件传递了 age 属性给 n 个子组件，n 个子组件又把这个 age 传递给了它们的子组件，以此类推 n 层深度。当你发现 age 展示的数值不正确的时候，你能在这 n _ n _ n * n 个组件中找到是谁改了吗？
如果使用单向数据流，当你遇到不可描述的错误的时候，你就会很容易排查问题。假设你发现 age 显示不正确。那么你只需要在最顶级的父组件中去排查即可，而不需要每个子组件里面都去排查。
自定义事件 $emit
在父组件中可以通过 v-on 或者 @ 在子组件身上进行监听事件，子组件通过调用 $emit 可以触发父组件监听的事件，同时还能够传递参数。
:::warning 注意
监听的事件名必须和触发的事件名保持一致。
:::
Home.vue
<template>
<div class="home">
<MyChildren name="xiaoming" :age="age" @changeAge="handleChange" />
</div>
</template>
<script>
import MyChildren from './MyChildren.vue'
export default {
components: { MyChildren },
data() {
return {
age: 18
}
},
methods: {
handleChange(val) {
this.age = val
}
}
}
</script>
MyChildren.vue
<template>
<div class="my-children">
{{ age }}
<button @click="handleClick">点我修改父组件的 age</button>
</div>
</template>
<script>
export default {
props: {
age: {
type: Number,
default: 0
}
},
methods: {
handleClick() {
this.$emit('changeAge', this.age + 1)
}
}
}
</script>
原文链接：菜园前端
