Vue.component('组建名',配置对象同new Vue())
和根组件的定义 区别 在于 不需要指定el选项 手动将组件书写在想挂载的位置
组件只是复用逻辑和结构 样式 并不复用数据 data 是函数 必须有返回值
通过Vue.component定义的组件必须在根组件实例化之前，必须写在根组件实例化的容器中
其他配置与根组件类似
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" width="device-width"scale="1.0"/>
<title>Title</title>
</head>
<body>
<div id="app">
<navigator></navigator>
<!--自定义组件-->
<shc></shc>
<!--<shc/>-->
<tabBar></tabBar>
</div>
<!--引入vue.js文件-->
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
Vue.component("shc",{
template:'<h1>{{msg}}</h1>',
data(){
return{
msg:"我是自定义组件"
}
},
methods:{},
filters:{},
computed:{}
});
Vue.component("navigator",{
template:'<div>成员管理</div>',
data(){
return{
msg:"我是自定义组件"
}
},
});
Vue.component("tabBar",{
template:'<h1>tabbar</h1>',
data(){
return{
}
},
});
let vm=new Vue({
el:"#app"
});
</script>
</body>
</html>
扫一扫
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
