系列文章


Vue 的组件化开发

对大型网页、站点而言，如果单纯使用一个 Vue 文件会显得内容过于复杂，并且难以查错，于是出现了组件。

组件是带有名称的、可复用的实例，是页面的砖头，多个组件组合在一起分别行使不同功能，分离代码。当某个部分出现问题后可以第一时间定位组件进行修改，并且有利于进行代码复用。在进行迭代化开发时也可以快速修改所有应用的组件。


组件基础

组件使得我们把页面元素拆分成了各个部分，并单独进行处理。定义组件时，应定义在新 Vue 文件中（通常在 ./src/components 目录下），并称为单文件组件（SFC）。通常情况下，组件文件名要大写开头。

组件的使用

组件间通常是以父子关系存在的，使用子组件需要在父组件内进行导入。导入后还需要在父组件内进行注册，注册后就可以在 <template> 内使用这个标签化的组件了，如下例：

<template>
  <div>
    <Vue/>             <!-- 子组件使用在此 -->
  </div>
</template>
import HelloVue from './components/Vue.vue' // 子组件引入

export default{
    components: { Vue },                    // 子组件注册
    data() {
        return: {
            
        }
    }
}

子组件可以在多个父组件内重用。且每个标签都代表着一个实例，这些重用的组件间数据不互通。关于组件的注册还分有全局注册和局部注册两种，粗略来看全局注册更便利，但局部注册更有利于项目维护，使得依赖关系更简洁。


props 与数据传递

在父子组件间，难免需要进行数据通信，在这里先简单介绍一种最简单的数据绑定： props

props 是标签上一种特殊的 attribute，它用于进行父 → 子之间的数据传递，通信方向是单向的。父组件通过 props 将数据发送给子组件，子组件从 props 中获取一个只读数据。

试图修改 props 数据

props 使用

要使用 props 数据，则需要先在子组件的 <script> 中对其进行声明：

export default: {
    props: ['data1', 'data2'] // 注意要使用字符串形式标注变量
}

随后，当一个值被传递给 prop 时，它将成为该组件实例上的一个属性。该属性的值就在模板和组件的 this 上下文中访问了。props 不限数量，但是当父组件没有把实际值绑定给某个 props 时，它将在子组件中将没有定义。

随后父组件在调用子组件时使用 attribute 的形式对props 进行传值。这里自然可以使用 v-bind 进行动态绑定，你甚至可以给子组件用 v-for：

<Child data1="asdasd" :data2="message" />

<Childs v-for="data in datas" 
  data1="asdasd" 
  :data2="data.message" 
 />

$emit 与事件传递

当子组件接收某种信息/事件，需要向父组件传递某个事件时，可以使用 $emit 方法上抛一个事件，在父组件中使用 v-on 进行事件监听，如下例：

<!-- 父组件实例化子组件，监听自定义事件 manmade-event -->
<Child @manmade-event="someMethod"</Child>

<!-- 子组件自定义事件，并通过 $emit 触发上抛 -->
<button @click="$emit("manmade-event")">Emit!</button>
<!-- 或在 script 中声明方法，调用 this.$emit("manmade-event") -->

这样父组件就直接监听到了子组件的信息事件，并能在对应函数 someMethod 中做出响应。在使用自定义事件前，需要在子组件 export 时进行声明，这里需要声明组件可能触发的所有事件。否则控制台会显示警告：

export default {
  props: ['aaaa'],
  emits: ['manmade-event']
}

$refs 和数据引用

首先介绍一个 attribute：ref


PREV：从负开始的 Vue 学习 (1)