Vue学习笔记(七) 组件

水深无声 2021-11-05 10:26 314阅读 0赞

### 0、入门 ###

在开始正式讲解组件之前，我们首先来看一个简单的例子：

<!DOCTYPE html>
    <html>
    
    <head>
        <title>Demo</title>
        
    </head>
    
    <body>
        <div id="app">
            <button-counter></button-counter>
        </div>
    
        
    </body>
    
    
    </html>

下面我们来详细看一下上面这份代码：

Vue.component('button-counter', {
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">{
         { count }} times</button>'
    })

我们首先通过全局方法 `Vue.component()` 创建了一个名为 button-counter 的全局组件

该方法的第一个参数是组件名，第二个参数是选项对象，对象中包含两个属性，`data` 和 `template`

属性 `data` 是一个 **返回对象的函数**，用于储存动态变化的数据

之所以定义为函数，是因为组件可能被用来创建多个实例，若定义为对象，则所有实例将会共享同一份数据对象

属性 `template` 是一个 **模板字符串**，用于定义组件的 HTML 代码

需要注意的是，组件必须是 **单个根元素**，也就是说模板的内容必须包裹在一个父元素内

new Vue({
        el: '#app',
    })

然后，我们就可以在一个通过 `new Vue()` 创建的根实例中，把这个组件当作自定义元素使用

好，在对组件有了一个初步的理解之后，下面我们再来进行详细的学习

### 1、组件注册 ###

组件是可复用的 Vue 实例，在使用组件前，我们首先要对组件进行注册，以便于 Vue 能够识别出来

（1）组件注册的参数有两个，分别是 **组件名** 和 **选项对象**

*  组件名

定义组件名的方式有两种，分别是 kebab-case（短横线分隔命名）和 PascalCase（首字母大写命名）

kebab-case：在引用时，也需要使用 kebab-case

PascalCase：在模板中使用时，两种命名法都可用；在 DOM 中使用时，只有 kebab-case 是有效的

*  选项对象

该对象接收的选项与 `new Vue()` 接收的选项类似，仅有的例外是像 `el` 这样的根实例特有的选项

（2）组件注册的方式有两种，分别是 **全局注册** 和 **局部注册**

*  全局注册

我们可以使用全局方法 `Vue.component()` 进行全局注册，该方法的第一个参数是组件名，第二个参数是选项对象

全局注册的组件可以在任何新创建的 Vue 根实例中使用

Vue.component('component-a', { /* ... */ })
    Vue.component('component-b', { /* ... */ })
    
    new Vue({ el: '#app' })

*  局部注册

我们可以在创建根实例时使用选项 `components` 进行局部注册，它是一个对象，键是组件名，值是选项对象

局部注册的组件不可以在其子组件中使用，也就是说，在下例中两个组件不可以在各自内部相互调用

var ComponentA = { /* ... */ }
    var ComponentB = { /* ... */ }
    
    new Vue({
        el: '#app',
        components: {
            'component-a': ComponentA,
            'component-b': ComponentB
        }
    })

如果希望 `ComponentA` 在 `ComponentB` 中可用，我们则需要换一种写法：

var ComponentA = { /* ... */ }
    
    var ComponentB = {
      components: {
        'component-a': ComponentA
      },
      // ...
    }

### 2、向子组件传递数据 —— prop ###

prop 是在组件注册的一些自定义特性，当一个值传递给一个 prop 特性时，它就变成那个组件实例的一个属性

（1）传递静态 prop

在下例中，我们给 prop 传递了一个静态的值，`Title Here`

<!DOCTYPE html>
    <html>
    
    <head>
        <title>Demo</title>
        
    </head>
    
    <body>
        <div id="app">
            <title-item title="Title Here"></title-item>
        </div>
    
        
    </body>
    
    
    </html>

（2）传递动态 prop

在下例中，我们通过 `v-bind` 给 prop 绑定了一个动态的对象，`content`

<!DOCTYPE html>
    <html>
    
    <head>
        <title>Demo</title>
        
    </head>
    
    <body>
        <div id="app">
            <title-item v-bind:title="content.title"></title-item>
        </div>
    
        
    </body>
    
    
    </html>

（3）prop 类型与 prop 验证

在上面的两个例子中，props 都是一个字符串数组，其中的每一个 prop 都是一个字符串

但事实上，prop 还可以是其它类型

这时我们可以用对象列出 prop，其中对象的键是 prop 的名称，对象的值是 prop 的类型

Vue.component('my-component', {
        props: {
            propA: String,
            propB: Number,
            propC: Boolean,
            propD: Array,
            propE: Object,
            propF: Function
            // ...
        },
        // ...
    })

既然 prop 有了类型，就要判断 prop 是否符合类型，我们可以定制 prop 的验证方式（以下是官方文档中的一个例子）

Vue.component('my-component', {
      props: {
        // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
        propA: Number,
        // 多个可能的类型
        propB: [String, Number],
        // 必填的字符串
        propC: {
          type: String,
          required: true
        },
        // 带有默认值的数字
        propD: {
          type: Number,
          default: 100
        },
        // 带有默认值的对象
        propE: {
          type: Object,
          // 对象或数组默认值必须从一个工厂函数获取
          default: function () {
            return { message: 'hello' }
          }
        },
        // 自定义验证函数
        propF: {
          validator: function (value) {
            // 这个值必须匹配下列字符串中的一个
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
          }
        }
      }
    })

当 prop 验证失败时，(开发环境构建版本的) Vue 将会产生一个控制台的警告

### 3、向父组件传递数据 —— 自定义事件 ###

prop 是一个单向下行绑定，即父级 prop 的更新会向下流动到子组件中，但是反过来不行

如果子组件要把数据传递给父组件，则需要使用自定义事件

父组件可以通过 `v-on` 监听子组件实例的任意事件，而子组件可以通过 `$emit()` 触发事件

（1）监听子组件事件

<!DOCTYPE html>
    <html>
    
    <head>
        <title>Demo</title>
        
    </head>
    
    <body>
        <div id="app">
            <p>{
         { total }}</p>
            <button-counter v-on:increment="incrementTotal"></button-counter>
        </div>
    
        
    </body>
    
    
    </html>

下面让我们来详细解读一下上面这段代码：

Vue.component('button-counter', {
        template: '<button v-on:click="incrementHandler">{
         { counter }}</button>',
        data: function () {
            return {
                counter: 0
            }
        },
        methods: {
            incrementHandler: function () {
                this.counter += 1
                this.$emit('increment')
            }
        },
    })

首先，我们定义了一个名为 button-counter 的组件

子组件 button-counter 使用 `v-on` 监听原生事件 click，该事件的处理函数是 `incrementHandler()`

在 `incrementHandler()` 中，首先将 counter（子组件中的数据）的值加 1，然后触发自定义事件 increment

<div id="app">
        <p>{
         { total }}</p>
        <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>

new Vue({
        el: '#app',
        data: {
            total: 0
        },
        methods: {
            incrementTotal: function () {
                this.total += 1
            }
        }
    })

根组件同样是通过 `v-on` 监听自定义事件 increment，该事件的处理函数是 `incrementTotal()`

在 `incrementTotal()` 中，将 total（根组件中的数据）的值加 1

（2）通过事件抛出一个值

我们可以在 `$emit()` 函数的第二个参数中抛出一个值

并在事件处理函数的第一个参数中接收该值

new Vue({
        el: '#app',
        data: {
            total: 0
        },
        methods: {
            incrementTotal: function (value) {
                this.total += value
            }
        }
    })

转载于:https://www.cnblogs.com/wsmrzx/p/11210400.html