1.全局组件：
Vue.component('my-component',{
template:`
<ul>
<li></li>
</ul>
`})
newVue({el:'#app',})
2.局部：
newVue
({el:".nr",components:{"my-component":{template:`
<li>这是组件部分</li>
`} } })
3.父传子：
Vue.component('my-father',{
template:`
<div>
<my-son v-bind:tit="title"></my-son>
<my-list v-bind:fruit="arr"></my-list>
</div>
`
,
data:function(){
return{
arr:['apple','banana','orange'],
title:'水果列表'
}
}
})
//获取title
Vue.component('my-son',{
props:['tit'],
template:`
<h2>{{tit}}</h2>
`
})
Vue.component('my-list',{
props:['fruit'],
template:`
<ul>
<li v-for="value in fruit">{{value}}</li>
</ul>
`
})
new Vue({
el:"#app",
})
4.子传父：
Vue.component('my-father',{
template:`
<div>
<h1>{{mess}}</h1>
<my-child @send='revMsg'></my-child>
</div>
`,
data:function(){
return{
mess:''
}
},
methods:{
revMsg:function(txt){
this.mess=txt
}
}
})
Vue.component('my-child',{
template:`
<button @click='sendFather'>给父组件</button>
`,
data:function(){
return{
msg:'ming'
}
},
methods:{
sendFather:function(){
// this.$emit('自定义事件',参数)
this.$emit('send',this.msg)
}
}
})
new Vue({
el:"#app"
})
网友评论