<!doctype html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<counter></counter>
</div>
<script>
// 定义全局组件，两个参数，组件名称和组件参数
Vue.component("counter",{
template:`<button v-on:click="count++" >{{count}}</button>`,
data(){
return {
count:0
}
}
})
var vm = new Vue({
el:"#app",
});
</script>
</body>
</html>
效果图
那如果我将全局组件放置在vm之后呢？
var vm = new Vue({
el:"#app",
});
Vue.component("counter",{
template:`<button v-on:click="count++" >{{count}}</button>`,
data(){
return {
count:0
}
}
})
按钮不渲染。
为什么呢？
因为vm定义的时候，这个全局组件还没有注册。。它用的是默认的vue；当然不渲染啦。
网友评论