创建school组件
const school = Vue.extend({
template:`
<div>
<h1>我是创建的school组件</h1>
<h1>11111111111111</h1>
</div>
`,
data() {
return {
userName:"张三"
}
},
methods:{
func1(){
return 100;
}
}
})
全局注册组件
Vue.component("school",school);
var vm = new Vue({
el:"#app",
data() {
return {
userName:"李四"
}
},
components:{
school,
},
methods: {
},
})
// 使用自定义组件规则
// 1.定义组件中不要绑定el
// 2.data必须使用函数写法
// 3.注册时可以取别名,别名不可以驼峰命名,需要使用-连接,不能使用已有的标签作为名称
// 4.模板时只能有一个父级,只在vue2中
// 5.未搭建脚手架使用单标签会使后面代码都不渲染
Vue.config.productionTip = false;
const student = Vue.extend({
template:`
<div>
<h1>我是student组件</h1>
<ccc></ccc>
</div>
`,
})
const nameList = {
template:`
<div>
<h1>我是nameList组件</h1>
</div>
`,
}
Vue.component("ccc",nameList);
const school = Vue.extend({
template:`
<div>
<h1>我是school组件</h1>
<bbb></bbb>
</div>
`,
components:{
bbb:student
}
})
var vm = new Vue({
el:"#app",
methods: {
},
components:{
School:school,
abc:student,
"student-puls":student,
"studentPuls":student,
aaa:nameList,
}
})