1. 使用Vue.extend
<div id="app">
<my-comp></my-comp>
</div>
<script>
var com1 = Vue.extend({
template:'<p>我是extend创建的组件</p>' // 就是组件展示的HTML
})
var vm = new Vue({
el:'#app',
components:{
'myComp':com1,
}
})
</script>
注意
- 在components 里面绑定组件时候,可以使用驼峰命名,但使用标签时候,只能使用 “-” 连接
2. 使用template元素
<div id="app">
<p>我是app的内容</p>
<temp-abc></temp-abc>
</div>
<template id="temp1">
<div>
<p>我是template元素里面的内容1</p>
<p>我是template元素里面的内容2</p>
</div>
</template>
<script>
var vm = new Vue({
el:'#app',
components:{
'tempAbc':{
template:'#temp1',
data() {
return {
}
},
}
}
})
</script>