<!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 -
}, -
// ... -
}
5764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
