Vue.js 学习(9) -- 组件1

水深无声 2022-06-15 04:26 130阅读 0赞

终于等到组件。

组件是Vue最强大的功能之一，它可以提供一层封装，将一些自定义的功能打包，以供开发者在后续的代码中使用。

## 使用组件的基本格式 ##

组件可以在全局范围内注册，也可以仅在另一个实例或组件中注册，下面我们先来介绍在全局范围内注册组件：

**全局组件**

Vue.component('my-component', {
      // 选项
    })

> PS：对于组件的标签名（在上面这个栗子中是my-component），Vue并不强制要求遵守W3C规则（小写，分隔符为一个短杠），但是为了代码统一，还是建议大家都遵守这个规则。

组件注册完成后，就可以在代码中这样写：

但是要注意的是：要确保在初始化example实例之前完成注册组件的代码：

// 注册
    Vue.component('my-component', {
      template: '<div>A custom component!</div>'
    })
    // 创建根实例
    new Vue({
      el: '#example'
    })

代码运行后，会渲染为：

<div id="example">
      <div>A custom component!</div>
    </div>

**局部组件**

可以在新建vue实例的时候，为传入的参数添加一个components属性，就可以完成局部组件的注册：

new Vue({
      // ...
      components: {
        // <my-component> 将只在父模板可用
        'my-component': {
            template: '<div>A custom component!</div>'
        }
      }
    })

**一些必要的解释**

第一：

> 当使用 DOM 作为模版时（例如，将 el 选项挂载到一个已存在的元素上）, 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 < ul > ， < ol >， < table > ， < select > 限制了能被它包裹的元素， < option > 只能出现在其它元素内部。  
> 在自定义组件中使用这些受限制的元素时会导致一些问题，例如：

> 此时，自定义组件 < my-row > 被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的 is 属性：

第二：data 必须是函数

这点优点奇怪，但是，在构建组件的过程中，data属性必须是函数。

var data = { counter: 0 }
    Vue.component('simple-counter', {
      template: '<button v-on:click="counter += 1">{ { counter }}</button>',
      // data 是一个函数，否则 Vue 会发出警告
      data: function () { 
        return {
            counter: 0
        }
      }
    })
    new Vue({
      el: '#example-2'
    })

## 父组件和子组件 ##

父子组件通常是这样的关系：父组件在他的templete中使用了子组件。此时他们两个一定需要互相传递信息：在Vue中，父子组件传递信息可以总结为props down, events up——父组件给子组件传递数据，子组件给父组件传递它的内部事件。

> 然而，在一个良好定义的接口中尽可能将父子组件**解耦**是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。

## Prop ##

**基础：使用prop传递数据**

定义：

Vue.component('child', {
      // 声明 props
      props: ['message'],
      // 就像 data 一样，prop 可以用在模板内
      // 同样也可以在 vm 实例中像 “this.message” 这样使用
      template: '<span>{ { message }}</span>'
    })

引用：

**进阶：动态Prop**

动态prop是利用指令v-bind实现的——还记得v-bind嘛？它可以将一个动态的变量绑定为html元素的属性。

还是上一个栗子中的child

这个栗子中，v-bind将child标签的message属性值绑定为parentMsg，而parentMsg是通过v-model指令和input的value绑定。这样就达成效果：input内输入的值实时称为child的message属性，并显示出来。

**单向数据流**

prop只能由父组件传递给子组件（子组件不能传递给父组件prop），并且在子组件中，只能接收prop值并作出相应的反应，但不可以修改prop。这一点和React的props很相似。

**prop验证**

当我们对prop类型值无要求时，这样定义props：

props: ['initialCounter'],
    data: function () { 
      return { counter: this.initialCounter }
    }

而如果，我们希望props是某种特性类型的变量，就要以如下方式定义：

Vue.component('example', {
      props: {
        // 基础类型检测 （`null` 意思是任何类型都可以）
        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 value > 10
          }
        }
      }
    })

其中，type可以是如下类型：

String
    Number
    Boolean
    Function
    Object
    Array

> 当 prop 验证失败了，如果使用的是开发版本会抛出一条警告。

## 事件 ##

上面讨论的prop是父组件传递给子组件信息的方式。如果子组件想要传递给父组件信息应该怎么做呢？答案就是事件。

所有的Vue实例都有事件接口，开发者可以使用：`$on(eventName)` 监听事件；使用 `$emit(eventName)` 触发事件。

先给出一个栗子，然后我们在栗子后解释代码：

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

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

代码分析：  
1、使用Vue.component方法创建自定义的组件button-counter。该组件拥有自己的数据：counter，还有方法increment。在template的定义中，我们可以看到，使用v-on绑定了事件，当按钮被点击时触发increment方法。而该方法被触发后，执行方法的最后，它触发了increment事件。这个increment事件将会被传递到上层。

2、`<button-counter v-on:increment="incrementTotal"></button-counter>` 这段代码中可以看到，当触发了increment事件的时候，就会执行父组件 的incrementTotal方法（在new Vue…中我们可以找到这个方法）。

以这种事件传递的方式，子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。

**在组件中使用v-model**

首先要明确，指令v-model其实只是一个语法糖。

相当于

也就是，当input事件被触发，something就会随着输入改变，从而改变了input的value；同时，something作为一个变量，可以在代码中修改或者饮用，它可以和value一直保持同步。

在组件中使用v-model:

<currency-input v-model="price"></currency-input>

对比前面的语法糖，并假想这里的v-model替换为v-bind&v-on:input…  
我们就可以明白，如果想让组件的v-model生效，组件必须：  
1、接受一个value属性；  
2、在有新的value时触发input事件。

Vue.component('currency-input', {
      template: `\
        <span>\
          $\
          <input\
            ref="input"\
            v-bind:value="value"\
            v-on:input="updateValue($event.target.value)">\
        </span>\
      `,
      props: ['value'],
      methods: {
        // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
        updateValue: function (value) {
          var formattedValue = value
            // 删除两侧的空格符
            .trim()
            // 保留 2 小数位
            .slice(0, value.indexOf('.') + 3)
          // 如果值不统一，手动覆盖以保持一致
          if (formattedValue !== value) {
            this.$refs.input.value = formattedValue
          }
          // 通过 input 事件发出数值
          this.$emit('input', Number(formattedValue))
        }
      }
    })

一个更复杂但是完整的应用可见：  
[https://jsfiddle.net/chrisvfritz/1oqjojjx/?utm\_source=website&utm\_medium=embed&utm\_campaign=1oqjojjx][https_jsfiddle.net_chrisvfritz_1oqjojjx_utm_source_website_utm_medium_embed_utm_campaign_1oqjojjx]

## slot ##

**编译作用域**

总的来说，就是：父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

如下这段代码无效：

<child-component v-show="someChildProperty"></child-component>

正确的写法是：

Vue.component('child-component', {
      // 有效，因为是在正确的作用域内
      template: '<div v-show="someChildProperty">Child</div>',
      data: function () { 
        return {
          someChildProperty: true
        }
      }
    })

**slot**

slot到底是干什么的呢？  
来看这段代码：

要注意的是，app这个组件不知道它的字节点有什么，app的父组件才知道。  
这样，如果app组件中没有slot，那么app下的app-header/app-footer就会被丢弃。  
而如果，app组件的模版中有slot，那么，app-header/app-footer就会插入到slot所在的位置，并替换掉slot.

另一个栗子：  
假定 my-component 组件有下面模板：

<div>
      <h2>我是子组件的标题</h2>
      <slot>
        只有在没有要分发的内容时才会显示。
      </slot>
    </div>

父组件模版

<div>
      <h1>我是父组件的标题</h1>
      <my-component>
        <p>这是一些初始内容</p>
        <p>这是更多的初始内容</p>
      </my-component>
    </div>

结果：

<div>
      <h1>我是父组件的标题</h1>
      <div>
        <h2>我是子组件的标题</h2>
        <p>这是一些初始内容</p>
        <p>这是更多的初始内容</p>
      </div>
    </div>

**具名slot**

多个slot的时候，我们可以使用属性name来规定如何将父组件的内容嵌入到子组件模版中。

例如，假定我们有一个 app-layout 组件，它的模板为：

父组件：

<app-layout>
      <h1 slot="header">这里可能是一个页面标题</h1>
      <p>主要内容的一个段落。</p>
      <p>另一个主要段落。</p>
      <p slot="footer">这里有一些联系信息</p>
    </app-layout>

结果：

<div class="container">
      <header>
        <h1>这里可能是一个页面标题</h1>
      </header>
      <main>
        <p>主要内容的一个段落。</p>
        <p>另一个主要段落。</p>
      </main>
      <footer>
        <p>这里有一些联系信息</p>
      </footer>
    </div>

我们注意到，在app-layout组件中，仍有一个匿名 slot ，它是默认 slot ，作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot ，这些找不到匹配的内容片段将被抛弃。

**作用域插槽**

作用域插槽是一种特殊类型的插槽，用作（可以传入数据的）可重用模板，而不是已渲染元素。

栗子：  
子组件：

父组件：

<div class="parent"> <child> <template scope="props"> <span>hello from parent</span> <span>{ { props.text }}</span> </template> </child> </div>

讲解：具有特殊属性 scope 的 < template > 元素，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 prop 对象。这样，我们可以完成父组件和子组件之间的数据交流。

渲染结果：

<div class="parent">
      <div class="child">
        <span>hello from parent</span>
        <span>hello from child</span>
      </div>
    </div>

[https_jsfiddle.net_chrisvfritz_1oqjojjx_utm_source_website_utm_medium_embed_utm_campaign_1oqjojjx]: https://jsfiddle.net/chrisvfritz/1oqjojjx/?utm_source=website&utm_medium=embed&utm_campaign=1oqjojjx