组件(可复用的vue实例)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<aa></aa>
<aa></aa>
</div>
<script>
var A=Vue.extend({
template:"<h3>我是组件</h3>"
})
Vue.component('aa',A);
vm=new Vue({
el:"#app",
data:{}
});
</script>
</body>
</html>
注册组件必须在Vue实例化之前
全局组件(跨vue实例)
组件的data选项必须是一个函数，该函数返回一个对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<aa></aa>
</div>
<script>
var A=Vue.extend({
data(){
return{
msg:"我是全局组件"
}
},
methods:{
change(){
this.msg="changed";
}
},
template:"<h3 @click='change'>{{msg}}</h3>"
})
Vue.component('aa',A);
vm=new Vue({
el:"#app",
data:{}
});
</script>
</body>
</html>
局部组件（用components,仅在当前vue实例中使用）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-aaa></my-aaa>
</div>
<script>
let vm=new Vue({
el:"#app",
data:{
},
components:{
"my-aaa":{
data(){
return{
msg:"welcome vue"
}
},
methods:{
change(){
this.msg="changed"
}
},
template:'<h3 @click="change">{{msg}}</h3>'
}
}
});
</script>
</body>
</html>
组件模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="box">
<my-aaa></my-aaa>
</div>
<template id="aaa">
<div>
<h1 @click="change">{{msg}}</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</div>
</template>
<script>
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue',
arr:['apple','banana','orange']
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'#aaa'
}
}
});
</script>
</body>
</html>
网友评论