组件名命名规则
第一种:短横线分隔命名
Vue.component('my-component-name', { /* ... */ })
调用组件
<my-component-name>
第二种:驼峰命名
Vue.component('MyComponentName', { /* ... */ })
调用组件
<my-component-name> 和 <MyComponentName> 都是可接受的
局部注册
全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部注册组件</title>
</head>
<script type="text/javascript" src="./js/vue.js"></script>
<body>
<div id="app">
<button-counter></button-counter>
<!-- 调用test组件 -->
<test></test>
</div>
</body>
<script type="text/javascript">
Vue.component('button-counter', {
props: ['title'],
data : function () {
return {}
},
template: '<div> </div>',
methods:{
},
});
var vm = new Vue ({
el : "#app",
data : {
clicknow : function (e) {
console.log(e);
}
},
//声明components进行局部注册
components:{
test : {//将test声明成对象形式,template作为test对象的属性
template:"<h2>h2...</h2>"//声明模板属性template,对其进行模板赋值
}
}
});
</script>
</html>
显示结果页面