资讯专栏INFORMATION COLUMN

组件(1):组件定义

Alfred / 2992人阅读

摘要:全局注册使用定义组件,参数为一个包含了被定义组选项的对象。虽然它是个函数,但我们却给每个组件实例返回了同一个对象的引用每次返回同一个对象的引用,组件之间会互相污染。

全局注册

使用Vue.extend(options)定义组件,参数为一个包含了被定义组选项的对象。
使用Vue.component(id,[definition])注册定义好的组件,id为该组件名称。
[definition]既可以是一个extend()返回的实例,也可以是一个包含组件选项的对象(将会自动调用extend()方法)。

使用kebab-case命名组件
var mybtn = Vue.extend({
    template: "",
    data: function () {
        return { text: "使用extend自定义一个按钮" }
    }
})
/**方式一 */
Vue.component("my-btn-1", mybtn)
/**方式二 自动调用extend()*/
Vue.component("my-btn-2", {
    template: "",
    data: function () {
        return {text: "使用选项对象自定义一个按钮"}
    }
})
new Vue({
    el: "#app-1"
})

注册了组件,必须要有一个根实例,如果要在根实例中使用我们的组件,那么必须在此根实例初始化之前注册

extend()中设置的data选项必须是一个函数。以上Vue实例app-1将被我们定义的组件所替换。

局部注册

在根实例的components选项上注册一个组件。该组件只在此根实例中使用。

new Vue({
    el: "#app-2",
    components:{
        "my-btn-1":mybtn
    }
})
//or
new Vue({
    el: "#app-3",
    components: {
        "my-btn-2": {
            template: "",
            data: function () {
                return { text: "使用选项对象自定义一个按钮" }
            }
        }
    }
})
data属性

上面说过,定义组件的data选项不能是对象,必须是个函数。这是因为如果是对象,那么会给每一个组件实例返回同一个"data"对象引用,组件实例之间造成污染,这不是我们想见到的。

var data = { counter: 0 }
new Vue({
    el: "#app-3",
    components: {
        "component-3-1": {
            template:"",
            //虽然它是个函数,但我们却给每个组件实例返回了同一个对象的引用
            data: function(){
                return data
            }
        },
        "component-3-2": {
            template:"",
            data: function(){
                return {counter:0}
            }
        }
    }
})

component-3-1每次返回同一个对象的引用,组件之间会互相污染。
component-3-2每次返回一个新对象,组件之间解耦。

is特性

      、、" } } })
      2JacobThornton@fat
      # First Last Handle
      1 Mark Otto @mdo

直接使用,整个模板都被丢出


使用is正确解析。

另外is也被用于动态的切换组件,见组件(6):动态组件

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93459.html

相关文章

  • 组件(1):组件定义

    摘要:全局注册使用定义组件,参数为一个包含了被定义组选项的对象。虽然它是个函数,但我们却给每个组件实例返回了同一个对象的引用每次返回同一个对象的引用,组件之间会互相污染。 全局注册 使用Vue.extend(options)定义组件,参数为一个包含了被定义组选项的对象。使用Vue.component(id,[definition])注册定义好的组件,id为该组件名称。[definition]...

    张红新 评论0 收藏0
  • MVPArms官方快速组件化方案开源,来自5K star的信赖

    摘要:原文地址前言起源组件化方案分析业务组件的划分和代码隔离路由框架基础库的优势简介什么是组件化为什么要组件化分析现有的组件化方案如何选择组件化方案组件化方案描述架构图一览架构图详解宿主层业务层业务模块的拆分基础层核心基础业务公共服务基础组件其他 原文地址: https://www.jianshu.com/p/f67... 0 前言 0.1 起源 0.2 组件化方案分析 0.2....

    aikin 评论0 收藏0
  • Angularjs 1 深度解析:组件化编程

    摘要:一个高度可复用的组件则可以被称为控件,是可以单独投稿项目库的。行为的定制化通过参数绑定实现组件行为的定制化。组件被销毁时调用。当有组件复用的情况时请使用标识指定接收对象模型另外最好给事件名添加组件前缀。 转自自己在开源中国的博客:https://my.oschina.net/u/7247... angular 1 也要面向组件编程 前端组件化是前端开发模式中一个不可逆转的趋势,三大主要...

    caohaoyu 评论0 收藏0
  • vue組件自学

    摘要:在较高层面上,组件是自定义元素,的编译器为它添加特殊功能。这时可以把特性直接添加到组件上不需要事先定义添加属性之后,它会被自动添加到的根元素上。下面是一个例子在本例中,子组件已经和它外部完全解耦了。 Vue组件 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的...

    iKcamp 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<