码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-07-10 23:36:55      阅读:244      评论:0      收藏:0      [点我收藏+]

标签:function   通过   返回   blank   规则   javascrip   问题   example   问题:   

本文为转载,原文:Vue学习笔记入门篇——组件的使用

组件定义

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

组件使用

注册

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

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

运行结果如下:
技术分享

本文为原创,转载请注明出处
上一节:Vue学习笔记入门篇——Class 与 Style 绑定
返回目录
下一节:Vue学习笔记入门篇——组件的使用

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

标签:function   通过   返回   blank   规则   javascrip   问题   example   问题:   

原文地址:http://www.cnblogs.com/ChainZhang/p/7148050.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!