当前位置: 首页 > Web前端 > HTML

组件(一):组件定义

时间:2023-04-02 14:18:40 HTML

全局注册使用Vue.extend(options)定义组件,参数是包含定义组options的对象。使用Vue.component(id,[definition])注册定义的组件,id为组件名称。[definition]可以是extend()返回的实例,也可以是包含组件选项的对象(会自动调用extend()方法)。使用kebab-case命名组件varmybtn=Vue.extend({template:'{{text}}}',data:function(){return{text:'使用extend自定义一个按钮'}}})/**方法一*/Vue.component('my-btn-1',mybtn)/**方法二自动调用extend()*/Vue.component('my-btn-2',{template:'{{text}}',data:function(){return{text:'使用选项objectfromdefineabutton'}}})newVue({el:'#app-1'})

注册组件,必须有根实例,如果要在根实例中使用我们的组件,必须在根实例之前注册已初始化extend()中设置的数据选项必须是一个函数。上述Vue实例app-1的将被我们定义的组件替换。本地注册在根实例的组件选项上注册一个组件。该组件仅在该根实例中使用。newVue({el:'#app-2',components:{'my-btn-1':mybtn}})//或newVue({el:'#app-3',components:{'my-btn-2':{template:'{{text}}',data:function(){return{text:'使用选项对象自定义oneButton'}}}})data属性上面说了定义组件的data选项不能是对象,必须是函数。这是因为如果是对象,每个组件实例都会返回相同的'data'对象引用,造成组件实例之间的污染,这不是我们希望看到的。vardata={counter:0}newVue({el:'#app-3',components:{'component-3-1':{template:'{{counter}}',//虽然是一个函数,但是我们返回同一个对象对各个组件实例的引用data:function(){return数据}},'component-3-2':{template:'{{counter}}}/button>',data:function(){return{counter:0}}}}})
component-3-1每次都返回同一个对象的引用,组件会互相污染。component-3-2每次返回一个新的对象,组件之间解耦。is属性对
直接使用,将整个模板抛出usingistoparsecorrectly。另外,is也用于动态切换组件,参见组件(6):动态组件