参考官网上关于组件的介绍:https://cn.vuejs.org/v2/guide/components-registration.html
组件(component)使用的例子,创建一个html的文件把下面的代码拷贝进去,在浏览器上面打开就能看到效果:
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div style="text-align:center;margin-top:50px;" id="app">
<b-component></b-component>
<b-component2></b-component2>
</div>
<div style="text-align:center;margin-top:50px;" id="app2">
<b-component></b-component>
<b-component2></b-component2>
</div>
<b-component></b-component>
<b-component2></b-component2>
<script type="text/javascript">
//定义组件
Vue.component('b-component', {
template: '<div id="bComponent">我是全局组件,任何Vue实例都可使用</div>'
})
new Vue({
el: '#app',
components: {
'b-component2': {
template: '<div id="bComponent">我是局部组件,只能在app这个div里面使用</div>'
}
}
});
new Vue({
el: '#app2',
});
</script>
</body>
</html>
结果:
Reference:
https://www.cnblogs.com/landeanfen/p/6518679.html