注册组件，又细分为“ 全局注册 ”和“ 局部注册 ”！
1、全局注册
在调用Vue.component()注册组件时，组件的注册是全局的，这意味着该组件可以再、在当前页面的任意Vue实例下使用。
代码如下：
<body>
<div id="app1">
<h5>实例1</h5>
<m-comp></m-comp>
<b>-----------------------------------------------------------</b>
<br>
</div>
<div id="app2">
<h5>实例2</h5>
<m-comp></m-comp>
<b>-----------------------------------------------------------</b>
<br>
</div>
<!-- 借助免费的CDN来引入vue.js文件 -->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
//1、创建组件
var myComp=Vue.extend({
template:"<h3>欢迎来到我的游乐场【全局注册】</h3>"
});
//2、全局注册组件
Vue.component("m-comp", myComp);
//3、实例化【全局】注册
var v1=new Vue({
el:"#app1"
});
var v2=new Vue({
el:"#app2"
});
</script>
</body>
2、局部注册
如果不需要全局注册，或者是让组件在其他组件内使用，可以再Vue实例化时，设置选项参数的components参数属性实现局部组件。
代码如下：
<body>
<div id="app3">
<h5>实例3</h5>
<my-comp></my-comp>
<b>-----------------------------------------------------------</b>
<br>
</div>
<div id="app4">
<h5>实例4</h5>
<my-comp></my-comp>
<b>-----------------------------------------------------------</b>
<br>
</div>
<!-- 借助免费的CDN来引入vue.js文件 -->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
//1、创建组件
var myComp=Vue.extend({
template:"<h3>欢迎观看【局部注册】</h3>"
});
//2、实例化【局部】注册
var v3=new Vue({
el:"#app3",
components:{
"my-comp":myComp //局部注册组件
}
});
</script>
</body>
两个实现效果如下：
427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
