vue 组件及动态组件
vue版本:1.0.28
需要注意的是:
组件中的数据data是一个函数对象 必须return一个json对象
js
var Home=Vue.extend({ data(){ return { msg:"我是Home组件" } }, mthods:{ change(){ this.msg="我是home组件->welcome vue!" } }, template:'<h3 @click="change">{{msg}}</h3>' }) Vue.component('home',Home);//第一种方法(全局组件)
Vue.component('news',{//第二种方法(全局组件)
data(){
return {
msg:"我是news组件"
}
},
template:<h3>{{msg}}<h3>
})
var Login=Vue.extend({
data(){
return {
msg:"我是注册组件"
}
},
template:'#login'
}) var vm=new Vue({
el:'#wrap', data:{}, methods:{},
components:{
"login":Login,//第三种方法(局部组件)
"reg":{//第四种方法(局部组件)
data(){
return {
msg:"我是注册页面"
}
},
template:"#reg"
}
} })
html
<div id="wrap"> <home></home>
<news></news>
<login></login>
<reg></reg> </div>
<template id="login">
<h3>{{msg}}</h3>
</template>
<template id="reg">
<h3>{{msg}}</h3>
</template>
动态组件
html:
<div id="box">
<input type="button" value="按钮" @click="toggle">
<component :is="a"></component> </div>
<template id="home">
<h3>{{msg}}</h3>
</template>
<template id="news">
<h3>{{msg}}</h3>
</template>
<script>
window.onload=function(){
var vm=new Vue({
el:"#box",
data:{
a:"home"
},
methods:{
toggle(){
if(this.a=="home"){
this.a="news";
}else{
this.a="home";
}
}
},
components:{
"home":{
data(){
return {
msg:"我是主页内容"
}
},
methods:{},
template:"#home"
},
"news":{
data(){
return {
msg:"我是新闻内容"
}
},
template:"#news"
}
}
})
} </script>
以上只是个人的笔记记录 如有错误欢迎指出