当前位置: 首页 > Web前端 > vue.js

Vue组件注册方法_0

时间:2023-04-01 10:47:23 vue.js

全局注册全局注册的组件注册后可以在任何实例或组件中使用。注意:在创建根Vue实例之前必须设置全局注册Vue.component('componentname',{/**optionobject*/})比如Vue.component('my-component',{template:'

全局组件
'})newVue({el:"#app",data:{}})
组件的基本本质以上,组件是可重用的Vue实例,因此它们可以接收与newVue相同的选项,例如数据、方法和生命周期钩子。唯一的例外是特定于根实例的选项,如el。组件基础知识主要讲解:组件命名规则,模板选项,数据选项kebab-case可以在DOM中使用。Vue.component('my-component-a',{template:'
全局组件
'})Vue.component('MyComponentB',{template:'
全局组件
'})//正常//正常//错误将被认为是一个完整的单词
模板选项模板选项用于设置组件的结构,最终将被引入到根实例或其他组件中。模板中的语法与根实例中的结构一致,可以执行Vue相关的指令操作、插值表达式等。模板只能有一个根元素Vue.component("MyComponentA",{template:`

A组件的标题Content{{1+2*3}}

`})dataoptiondata选项用来存放组件的数据。与根实例不同的是,组件的数据选项必须是一个函数,数据设置在返回值对象中。组件不一定单独出现(一个组件封装一个功能)。为了保证多个组件实例中的数据相互独立而不是共享,需要通过作用域隔离在函数内部有一个独立的作用域,多次调用该函数,形成多个内部独立的作用域,作用域中的数据不会相互影响。这样的实现是为了保证每个组件实例都可以维护一个独立的返回对象副本,互不影响。Vue.component("MyComA",{template:`

{{title}}

{{content}}

`,data:function(){return{title:'title',content:'content'}}})每个组件都是独立的,修改某个组件的实例数据,其他不受本地注册影响的组件只能在当前实例中使用或在组件中。注意DOM的写法总是kebab-casecomponents。kebab-case中组件的键名是kebab-case连字符要引用newVue({...components:{'my-component-a':{template:'
{{title}}/div>'data(){return{title:"标题内容"}}},'MyComponentB':{template:'
{{title}}
'data(){return{title:"b标题内容"}}}}})//ok//ok
部分注册方法二:单独配置组件选项对象varMyComA={}//将选项对象放在对象中varMyComB={}newVue({el:"#app",components:{'my-com-a':MyComA,MyComB:MyComB//ES6缩写为MyComB}})

最新推荐
猜你喜欢