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

终于等到组件。

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

使用组件的基本格式

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

全局组件

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

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

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

<div id="example">
  <my-component></my-component>
</div>

但是要注意的是：要确保在初始化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 > 只能出现在其它元素内部。
在自定义组件中使用这些受限制的元素时会导致一些问题，例如：

<table>
  <my-row>...</my-row>
</table>

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

<table>
  <tr is="my-row"></tr>
</table>

第二：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>'
})

引用：

<child message="hello!"></child>

进阶：动态Prop

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

还是上一个栗子中的child

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:message="parentMsg"></child>
</div>

这个栗子中，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 v-model="something">

相当于

<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">

也就是，当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

slot

编译作用域

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

如下这段代码无效：

<!-- 无效，处于someChildProperty处的变量只会在父组件作用域查找 -->
<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-header></app-header>
  <app-footer></app-footer>
</app>

要注意的是，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 组件，它的模板为：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件：

<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="child">
  <slot text="hello from child"></slot>
</div>

父组件：

<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>