<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id = "app">
<!--使用组件-->
<cmp></cmp>
</div>
<div id = "app2">
<!--使用组件-->
<cx></cx> <!--局部组件-->
</div>
<script>
//创建组件构造器对象
const cmp = Vue.extend({
template:`<div>
<h1>
123456
</h1>
</div>`
})
//注册组件
Vue.component('cmp',cmp);
const app = new Vue({
el:'#app',
data:{
message:'lalal1',
age:0,
bbb:''
}
})
const app2 = new Vue({
el:'#app2',
data:{
message:'lalal1',
age:0,
bbb:''
},
components:{
cx:cmp
}
})
</script>
</body>
</html>
vue 组件化 全局和局部组件
最新推荐文章于 2024-04-04 19:22:26 发布