组件 (Component) 是 Vue.js 最壮大的功用之一。组件能够扩大 HTML 元素，封装可重用的代码。

组件的建立和注册

我们能够运用 Vue.component(tagName, options)注册一个全局组件。

<!--全局注册-->
<template>
  <div id="app">
    <my-component></my-component>
  </div>
</template>

<script>
  // 全局注册组件
  Vue.component('my-component', {
    template: '<div>我的组件</div>'
  })

  // 建立根实例
  new Vue({
    el: '#app'
  })
</script>

<!--衬着后的HTML-->
<div id="app">
  <div>我的组件</div>
</div>

我们还能够经由历程某个 Vue 实例/组件的实例选项 components 注册仅在其作用域中可用的组件，即部分组件。

<!--部分注册-->
<template>
  <div id="app">
    <my-component></my-component>
  </div>
</template>
<script>
  var Child = {
    template: '<div>我的组件</div>'
  }

  new Vue({
    el: '#app',
    components: {
      // 部分注册组件，<my-component> 将只在父组件模板中可用
      'my-component': Child
    }
  })
</script>

<!--衬着后的HTML-->
<div id="app">
  <div>我的组件</div>
</div>
运用prop
组件实例的作用域是伶仃的。父组件的数据须要经由历程 prop 才下发到子组件中。

<!--静态prop-->
<template>
  <child message="哈喽"></child>
</template>
<script>
  Vue.component('child', {
    // 声明 props
    props: ['message'],
    // 就像 data 一样，prop 也能够在模板中运用
    // 一样也能够在 vm 实例中经由历程 this.message 来运用
    template: '<span>{{ message }}</span>'
  })
</script>

假如想要通报一个变量到子组件中去，即传给子组件的值会追随父组件中该变量的值的变化而变化，我们能够用 v-bind 来动态地将 prop 绑定到父组件的数据。

<!--动态prop-->
<template>
  <div id="dynamic-prop">
    <input v-model="parentMsg">
    <br>
    <child v-bind:my-message="parentMsg"></child>
  </div>
</template>
<script>
  new Vue({
    el: '#dynamic-prop',
    data: {
      parentMsg: '父组件发过来的音讯'
    }
  })
</script>

我们还能够为组件的 prop 指定考证划定规矩。假如传入的数据不符合请求，Vue 会发出正告。这关于开辟给别人运用的组件异常有效。

<!--prop考证-->
<script>
  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
        }
      }
    }
  })
</script>

自定义事宜举行组件通讯

如今我们父组件能够运用 prop 通报数据给子组件。但子组件怎样跟父组件举行通讯呢？这里我们能够经由历程自定义事宜来完成。

详细点说就是运用 $on(eventName) 监听事宜，运用 $emit(eventName, optionalPayload) 触发事宜。

<template>
  <div id="message-event">
    <p v-for="msg in messages">{{ msg }}</p>
    <button-message v-on:message="handleMessage"></button-message>
  </div>
</template>
<script>
  Vue.component('button-message', {
    template: `<div>
    <input type="text" v-model="message" />
    <button v-on:click="handleSendMessage">发送音讯</button>
  </div>`,
    data: function () {
      return {
        message: '哈喽'
      }
    },
    methods: {
      handleSendMessage: function () {
        this.$emit('message', { message: this.message })
      }
    }
  })

  new Vue({
    el: '#message-event',
    data: {
      messages: []
    },
    methods: {
      handleMessage: function (payload) {
        this.messages.push(payload.message)
      }
    }
  })
</script>

运用插槽分发内容

为了让组件能够自由组合，我们须要一种体式格局来夹杂父组件的内容与子组件本身的模板。这个历程被称为内容分发。我们能够运用特别的 <slot> 元素作为原始内容的插槽，从而完成内容分发。

假如子组件模板包括一个 <slot> 插口，那末父组件的内容将会被衬着到插槽中。

<!--子组件模板-->
<templalte>
  <div>
    <h2>子组件的题目</h2>
    <slot>
      只要在没有要分发的内容时才会显现。
    </slot>
  </div>
</templalte>

<!--父组件模板-->
<template>
  <div>
    <h1>父组件的题目</h1>
    <my-component>
      <p>这是将会分发到子组件的一些初始内容</p>
    </my-component>
  </div>
</template>

<!--衬着后的HTML-->
<div>
  <h1>父组件的题目</h1>
  <div>
    <h2>子组件的题目</h2>
    <p>这是将会分发到子组件的一些初始内容</p>
  </div>
</div>

当须要有多个插槽时，我们能够在<slot> 元素上用一个特别的特征 name 来进一步设置怎样分发内容。多个插槽设置差别的名字，这时候签字插槽将婚配内容片断中有对应 slot 特征 name 的元素。

<!--layout 子组件模板-->
<template>
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<!--父组件模板-->
<template>
  <layout>
    <h1 slot="header">头部题目</h1>

    <p>主体内容的一个段落。</p>

    <p slot="footer">尾部版权信息</p>
  </layout>
</template>

<!--衬着后的HTML-->
<div class="container">
  <header>
    <h1>头部题目</h1>
  </header>
  <main>
    <p>主体内容的一个段落。</p>
  </main>
  <footer>
    <p>尾部版权信息</p>
  </footer>
</div>

总结

本节重要知识点是vue.js中组件的建立和注册，父组件运用prop向子组件通报数据并举行数据考证，运用自定义事宜举行组件间的通讯，运用插槽来使组件能够自由组合。vue.js组件是vue框架中最壮大的功用，学完后相信你对web组件化也会有肯定的了解了。