1.全局组件
// 创建组件构造器
var an = Vue.extend({
template: `<h1>我的</h1>`,
});
// 注册组件,在vue实例范围中使用<my></my>
Vue.component('my',an)
2.局部组件
// 创建组件构造器
var an = Vue.extend({
template: `<h1>我的</h1>`,
});
var app = new Vue({
el: "#app",
data: {},
// 注册组件
components:{
my:an
}
});
3.在组件中创建组件
// 创建组件构造器
var an1 = Vue.extend({//子组件
template: `<div>
<h1>我是标题1</h1>
</div>`,
});
var an2 = Vue.extend({//父组件
template: `<div>
<h1>我是标题2</h1>
<you></you>
</div>`,
components: {
you: an1,
},
});
var app = new Vue({
el: "#app",
data: {},
// 注册组件
components: {
my: an2,
},
});
4.简写
Vue.component("my", {
template: `<h1>我是标题1</h1>`,
});
注意:
1.extend里面可以写vue中除了el的其他配置项
2.extend可以省略不写直接写配置项
3.如果创建多个组件时,当template中只有一个标签时,需要给此标签外部再包括一个标签
5.组件模板抽离
//方法一
<script type="text/x-template" id="an">
<h1>标题1</h1>
</script>
Vue.component("my", {
template: "#an",
});
//方法二
<template id="an">
<h1>标题1</h1>
</template>
Vue.component("my", {
template: "#an",
});