Vue学习笔记入门篇——组件的使用

2017-07-10 本文已影响67人 ChainZhang

组件定义

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

组件使用

注册

注册一个全局组件，你可以使用 Vue.component(tagName, options)。
组件在注册之后，便可以在父实例的模块中以自定义元素 <my-component></my-component> 的形式使用。要确保在初始化根实例之前注册了组件.
例如：

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

    Vue.component('my-component', {
        template:'<span>hello chain</span>',
    })

    new Vue({
        el:'#example'
    })

结果如下:

局部注册

不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：

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

var Child = {
  template: '<span>hello chain</span>'
}
new Vue({
  el:'#example'
  components: {
    'my-component': Child
  }
})

结果如下:

这种封装也适用于其它可注册的 Vue 功能，如指令

DOM模板解析说明

当使用 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>

应当注意，如果您使用来自以下来源之一的字符串模板，这些限制将不适用：

 <script type="text/x-template">
JavaScript 内联模版字符串
.vue 组件

因此，有必要的话请使用字符串模版。

data必须是函数

通过 Vue 构造器传入的各种选项大多数都可以在组件里用。data 是一个例外，它必须是函数。实际上，如果你这么做：

Vue.component('my-component', {
  template: '<span>{{ message }}</span>',
  data: {
    message: 'hello'
  }
})

那么 Vue 会停止，并在控制台发出警告，告诉你在组件中 data 必须是一个函数。理解这种规则的存在意义很有帮助，让我们假设用如下方式来绕开 Vue 的警告：

<div id="example">
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
</div>
    var data = {
        counter:0
    }
    Vue.component('simple-counter',{
        template:'<button @click="counter += 1">{{counter}}</button>',
        data:function () {
            return data
        }
    })
    new Vue({
        el:'#example'
    })

运行结果如下:

由于这三个组件共享了同一个 data，因此增加一个 counter 会影响所有组件！这不对。我们可以通过为每个组件返回全新的 data 对象来解决这个问题：

    Vue.component('simple-counter',{
        template:'<button @click="counter += 1">{{counter}}</button>',
        data:function () {
            return {counter:0}
        }
    })