全局组件
用法:
Vue.component( id, [definition] )
参数:
{string} id
{Function | Object} [definition]
具体参考:https://vuejs.bootcss.com/api/?#Vue-component
案例:
<html>
<head>Vue.js</head>
<body>
<div id="app">
<div>
<miao></miao>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.component("miao",{
name:"miao",
data(){
return{
hello:"hello miao"
}
},
template:"<h1>{{hello}}</h1>"
})
var app = new Vue ({
el:"#app",
data:{
},
})
</script>
</body>
</html>
输出:
局部组件
案例:
<html>
<head>Vue.js</head>
<body>
<div id="app">
<div>
<zhang></zhang>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<template id="zhang">
<h2>{{hello}}</h2>
</template>
<script>
var app = new Vue ({
el:"#app",
data:{
},
components:{
zhang:{
name:"zhang",
data(){
return{
hello:"hello zhang"
}
},
template:'#zhang'
}
}
})
</script>
</body>
</html>
输出: