vue组件包括两种：1 .全局组件，2 .局部组件
局部组件var 变量名字一定要放在new Vue实例外面
1 .全局组件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue:component之组件使用</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<my-component>安达市多</my-component>
</div>
</body>
<script type="text/javascript">
//注册全局组件
Vue.component('my-component',{
template:'<div>我是全局组件</div>'
});
//实例vue
var app = new Vue({
el: "#app",
data:{
}
})
</script>
<style type="text/css">
#app{
text-align: center;
color: red;
font-size: 20px;
margin-top: 20px;
}
</style>
</html>全局组件直接像上面这样 注册 就可以 如果还想注册继续Vue.component(标签名字，{
template:"内容"
} )
2 .局部组件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue之注册局部组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
<my-hello></my-hello>
</div>
</body>
<script type="text/javascript">
//注册局部组件
var China = {
template:"<div>A custom component!</div>",
}
var hello = {
template: "<div>我是局部组件</div>"
}
//实例vue
var app = new Vue({
el:"#app",
components:{
'my-component':China,
'my-hello': hello
}
})
</script>
<style type="text/css">
#app{
text-align: center;
font-size: 20px;
margin-top: 20px;
color: red;
}
</style>
</html>局部组件注册要先var变量,变量在Vue实例外面申请 然后再实例Vue里components: {
"标签名字"：局部组件变量名字
}
使用方法也是在根元素里面<标签名></标签名>
扫一扫
890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
