Vue基础：子组件抽取与父子组件通信

Posted 2020-11-27 ygria

在工作中承担一部分前端工作，主要使用Vue + Element UI。
随着版本迭代，需求增加，页面往往变得更加臃肿，不易维护。学习子组件的封装和抽取，能更好适应需求。

为什么需要子组件

• 可复用
  将重复出现的元素封装成组件，可以灵活运用到各个页面中，避免重复劳动。
• 易维护
  每个组件相当于独立的功能组件。独立的组件结构可以让其他开发者快速定位到每个页面元素所对应的事件方法、样式表，并在修改该组件时不影响其他页面的功能。

组件的使用方法

子组件的定义方法和每一个Vue组件相同，使用时需要先注册，分为全局注册和局部注册两种。
全局&局部？
对于全局通用的组件，可以将其注册为全局的。在项目中更常用的是局部注册，全局注册固然方便，但会使组件的依赖结构不够清晰，可能带来的更高的维护成本。
Vue官网教程中给出如下建议：

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 javascript 的无谓的增加。

局部注册需要在每个使用到的地方都引用一次，父组件引用之后，子组件必须再次引用才能使用。

父子如何通信

组件之间相对独立，不共享变量，重中之重就是：如何传递信息?
我列出一些我目前接触到的常用数据传递方法:

• 使用路由参数传递：在A组件中向路由中写入，在B组件通过$route.query.param获取
• 存储在session Storage中或使用Vuex，存储常用共有变量
  ……
  组件之间构成父子关系，必然是结构和数据上存在依赖关系，当不能跳转路由或需要使用多个子组件时，上述方法不奏效了，所幸的是，Vue提供了一套现成的方法，可以总结为：
• 父传子用props
• 子传父用emit
• 双向绑定，compute+sync

props

父向子传递的信息，往往是子组件的初始化数据。假如将子组件看作一个类，在父组件中使用该类的实例，props有点类的构造参数。
props的写法也与构造函数形参类似，可以规定传参类型、是否必传等。

props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
}

$emit

emit函数支持子组件调用父组件函数，并支持传数据作为父组件接受调用函数时的传参。

• 使用场景示例
  子组件完成动作后，调用父组件的刷新列表方法：

// 子组件中
this.$emit("queryList")

// 父组件中
//刷新列表方法
queryList(){
}

使用$emit特性，很容易实现将子组件的值传递给父组件，并能控制父组件的动作。

双向绑定

更常见的需求是需要父组件和子组件的值实现同步，比如：

• 在父组件点击打开按钮，希望能控制子组件打开，在子组件内部点击关闭后，希望父组件的开关也被同步到关闭。
• 在父组件打开表单后，在子组件内填写，希望父组件知道子组件填了什么，实时同步在子组件的操作。

Vue规定了父子组件之间数据单向流动，不建议直接修改父组件传入的prop变量。所以为了实现双向绑定，我们需要：
1、在子组件中定义对应的变量B，拷贝父组件传入的初始值A
2、实时监测变量B，当B发生变化时，使用$emit，传递B的值给父组件
3、在父组件中定义接收值的更新函数，接收到新的值后，将值赋给A

---

实现第1、2点，compute完美满足需求。
为实现第三点，Vue提供了.sync语法糖，避免每次都要写一个更新函数，默认的函数名是update。
在明确了步骤后，我们很容易就能写出代码。需要稍微留意的是，子组件中变量B的命名最好与变量A对称，这样一看就是一对，代码更加清晰易懂。
例如：
A叫openDialog，B叫dialogOpened
A叫selectOption，B叫optionSelected

父组件中：
//父组件引用
<my-dialog :showDialog.sync="showDialog" ></my-dialog >

子组件中：

// 子组件
props: {
// 是否展示弹窗
showDialog: Boolean, 
}

....
// 在代码中修改dialogShowed的值


computed: {
dialogShowed: {
get() {
return this.showDialog;
},

set(val) {
this.$emit("update:showDialog", val);
}
}
}

总结

以上就是目前所总结到的抽取子组件的小经验~熟悉了这种模式之后，实现起来还是挺容易的。