<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <v-rua></v-rua> <heade></heade> <v-header></v-header> <!--<template id="one">--> <!--<div>--> <!--<h1>我是语法糖全局注册组件</h1>--> <!--<heade></heade>--> <!--</div>--> <!--</template>--> <!--这样放的话。全局注册会解析两次。id解析两次。所以经常放在div外。谁用谁就解析--> </div> <template id="one"> <div> <h1>我是语法糖全局注册组件</h1> <heade></heade> </div> </template> <template id="two"> <div> <h1>我是局部注册组件</h1> <heade></heade> </div> </template> </body> <script src="vue.js"></script> <script> //组件的好处就是可以复用。可以在组件中继续使用组件/但是切记要放在一个根节点上。可以加个<div ></div>抱起来 //记得一定要先挂载 //(1):全局注册两种方法//问题。。要是多个相同组件里面箱套了组件。调用的话。就会全部都调用。要作用域具体的一个组件。就用局部组件 //1;先构造组件。在注册组件 let headp=Vue.extend({ template:"<h1>我是头</h1>"//模板里放html内容 }); Vue.component("heade",headp);//js 里面使用驼峰命名(第一个是上面css中使用的任意命名。记得不要使用关键字)。css中用了- 号,首字母就要大写 //2;语法糖写法。简便 Vue.component("vHeader",{ template:"#one" });//记得放在newVue 前面 new Vue({ el:"#app", data:{}, components:{//局部注册.//写法相当于new Vue .也有data ;和方法等属性。值得注意的是所有组件必须写在根实例的前面才会生效, "vRua":{ template:"#two" } } }); </script> </html>
1全局注册实例(按照官网的例子下面是代码)
-
<div id="app">
-
<com-btn></com-btn>
-
<com-btn></com-btn>
-
</div>
-
<script>
-
Vue.component('com-btn',{
-
data:function(){
-
return{
-
num:0,
-
}
-
},
-
template:`<button v-on:click='change'>点我{{num}}次</button>`,
-
methods:{
-
change:function(){
-
this.num += 1;
-
}
-
}
-
})
-
var vm = new Vue({
-
el:'#app',
-
data:{
-
},
-
})
-
</script>
我们在注册一个组件的时候需要给他起一个名字比如com-btn,从上面的代码我们可以看见
Vue.component('my-component-name', { /* ... */ })
这个组件名字就是我们注册的这个组件com-btn的第一个参数.这个组件就是全局注册的,在他们注册之后,我们可以用在任何新创建的vue根实例(new Vue)里面。
值得注意的是所有组件必须写在根实例的前面才会生效,
2局部祖册的实例
-
<script>
-
var childcom ={
-
data:function(){
-
return{
-
num:0,
-
}
-
},
-
template:`<button v-on:click='change'>点我{{num}}次</button>`,
-
methods:{
-
change:function(){
-
this.num += 1;
-
}
-
}
-
}
-
var vm = new Vue({
-
el:'#app',
-
data:{
-
},
-
components:{
-
'com-btn':childcom,//调用这个组件
-
}
-
})
-
</script>
局部注册的好处 就是当你使用的是webpack这样的构建系统时,如果是用全局注册的这种方法注册的组件,那么当你不使用某一个组件的时候,它仍然会存在最终的构建结果之中,这就增加的无谓的js下载。
所以我们可以通过一个简单的js对象来注册组件
var ComponentA = { /* ... */ }
在需要使用这个组件时, 你只需要在你的你的根实例里面去调用这个定义的组件即可。
-
new Vue({
-
el: '#app'
-
components: {
-
'component-a': ComponentA,
-
'component-b': ComponentB
-
}
-
})
值得注意的是根实例的属性名字是components,千万不要忘记s。组件中的其他属性和实例的一样但是data必须是一个函数。
对于components对象中的每个的属性来说就是自定义组件的名字,属性值就是这个组件的选项对象。
局部注册的组件在其子组件中是不可用的,如果你希望componentA在componentB中可以使用那你需要下面这样写法:
-
var ComponentA = { /* ... */ }
-
var ComponentB = {
-
components: {
-
'component-a': ComponentA
-
},
-
// ...
-
}