vue中注册组件有两种方式一种是全局组件一种是局部组件
我们用俩种方式来做一个 简单的小demo 在屏幕上显示一个 hello world!
1.我们先来说全局组件吧
全局组件是注册在全局Vue对象中,不需要注册Vue实例化对象中,可以在各个地方使用 没有限制
Vue.component(‘组件名称’,{组件里面的对象描述}) // 组件名称可以采用驼峰式写法 但在页面上展示的时候
最好是 纯小写 中间加横线 如:helloWorld =>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<hello-world></hello-world>
</div>
</body>
<script type="text/javascript">
Vue.component('hello-world',{
template:"<h1>{{msg}}</h1>",
data(){
return {
msg:'hello world'
}
}
})
var app=new Vue({
el:'#app',
})
</script>
</html>
2.局部组件
要是注册在 另一个组件上,有使用范围 ,且必须先注册才可以使用
在父组件中注册 局部组件
components:{} 内容格式和 全局组件一样 且可以注册多个组件
<script type="text/javascript">
var app=new Vue({
el:'#app',
components:{
'hello-world':{
template:"<h1>{{msg}}</h1>",
data(){
return {
msg:'hello world'
}
}
}
}
})
最后的页面显示效果
好了 就是这样了 笔者 一直都是 vue的忠实粉丝 _ _ __
觉得有用的小伙伴点个赞
