Vue的精华之处就在于它的组件，重复使用，节省代码，提升工作效率。
Vue组件要使用先要注册，注册分为全局的和局部的注册。
全局注册：
注：1.my-component就是注册的组件自定义标签名称;
2. template 的 DOM 结构必须被一个元素包含，如果直接写成'全局组件'，不带"<div></div>"是无法渲染的。
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id= "app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component',{
template: '<div>全局组件</div>';
});
var app = new Vue({
el: "#app"
});
</script>
</body>
局部组件：
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id= "app">
<my-component></my-component>
</div>
<script>
var Local = {
template: '<div>局部组件</div>'
};
var app = new Vue({
el: "#app",
components: {
'my-component': Local
}
});
</script>
</body>
特殊HTML标签元素渲染:
<table>元素里面只允许有<tr><td><th>，所以在<table>内直接使用组件是无效的。这种情况下，可以使用特殊的is属性来挂载组件。（常见的限制元素还有<ul>,<ol>,<select>）
<div id= "app">
<table>
<tbody is="my-component"></tbody>
</table>
</div>
<script>
Vue.component('my-component',{
template: '<div>这里是组件内容</div>'
);
var app = new Vue({
el: "#app"
});
</script>
网友评论