全局组件与局部组件的区别
全局组件可以在页面中所有被Vue实例接管的区域内生效，局部组件只能在创建自己的Vue实例所接管的区域内实现，但是没有被Vue实例接管的区域内无论是局部组件还是全局组件都不起作用
用点击计数按钮举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全局组件</title>
<script src="../File/vue.js"></script>
</head>
<body>
<!-- 全局组件就是定义一个组件此组件可以在任何已经被Vue实例接管的区域内生效，而局部组件只能在自己的Vue实例接管的区域内生效 -->
<div id="test0">
<count_btn></count_btn>
</div>
<div id="test1">
<count_btn></count_btn>
</div>
<!-- 此div没有被任何Vue实例接管，因此无论是局部组件还是全局组件在此div中都无法生效 -->
<div>
<count_btn></count_btn>
</div>
</body>
<script>
//定义全局组件，使用Vue.component("定义组件的名字(自定义标签名字)",{组件效果})形式创建此组件在任何被Vue实例接管的区域内都可以使用
Vue.component('count_btn',{
data:function(){
return{
count:0
}
},
methods:{
add:function(){
this.count++
}
},
template:`
<button @click='add'>被点击了{{count}}次</button>
`
})
//创建一个Vue实例用于接管id="test0"的div，如果在此实例中定义组件只能在它所接管的区域内生效
new Vue({
el:"#test0"
})
//创建一个Vue实例用于接管id="test1"的实例，如果在此实例中定义组件只能在它所接管的区域内生效
new Vue({
el:"test1"
})
</script>
</html>页面效果：
扫一扫
3702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
