props 和 $emit
const parent = {
data(){
return {
a:1
}
}
components:{
child
},
template: `<div>我是父组件<child :num='a'/></div>`
}
const child = {
data(){
return {
b:100
}
},
props:{
num: {
type: Number,
default:2
require: true
}
}
template: `<div>我是子组件{{num}}</div>`
}
总结:
父组件传值给子组件 通过:value='数据',子组件通过props接收,这里的props可以为一个数组,也可以是一个对象,
type规定传过来的值的类型,如果是对象 数组 或者函数的话需要借助工厂函数返回默认值,
即: defaul(){return {}} ,require规定是否必传,default 和 require不可以同时存在
const child = {
data(){
return {
a:100
}
},
methods:{
send(){
this.$emit('send',this.a)
}
},
template:`<div><div>我是子组件</div><button @click='send()'>点击发送</button></div>`
}
const parent = {
data(){
return {
num:0
}
},
components:{
child
},
methods:{
get(val){
this.num = val
}
},
template:`<div><div>我是父组件{{num}}<child @send='get'/></div></div>`
}
总结:
子组件传父组件,需要借助$emit('事件名')发送一个事件给父组件,@事件名=''
children
const child = {
data(){
return {
msg:'hellow Vue'
}
},
template:`
<div>
<div>我是子组件 {{msg}}</div>
<button @click='change()'>点击更改父组件的值</button>
</div>`,
methods:{
change(){
this.$parent.val = '已更改'
}
}
}
const parent = {
data(){
return {
val:'我是父组件的值'
}
},
components:{
child
},
template:`
<div>
<div>我是父组件{{val}}<child/></div>
<button @click='get()'>点击更改子组件的值</button>
</div>`,
methods:{
get(){
this.$children[0].msg = 'hellow word'
}
}
}
总结:
父子组件通信也可以借助vue实例的两个属性$parent 和 $children 来完成通信,
此方式可以使父组件通过$children调用对应子组件的数据,子组件通过$parent来获取对应的父组件的数据
注意的是:在$children返回的是一个数组,而$parent返回的是一个对象
ref 和 refs
在对应的组件绑定ref='name',通过$refs.name来获取,需要注意的是ref如果绑定在普通的DOM元素上的
话是返回当前绑定的DOM元素,如果绑定在子组件上返回的是组件实例对象,这样的可以通过父组件访问
子组件的数据
公共的vue实例对象完成兄弟间组件通信
兄弟组件通信需要借助一个公共的vue实例对象来完成,其中一个兄弟组件通过$on发送一个发送一个事件,
另一个兄弟组件通过$emit接收事件
let bus = new Vue()
const sibling1 = {
data(){
return {
n: 1
}
},
methods:{
changen(){
this.n++
bus.$emit('change',2)
}
},
template: `
<div>我是sibling1{{n}}
<button @click='changen()'>点击改变</button>
</div>
`
}
const sibling2 = {
data(){
return {
n: 2
}
},
mounted(){
bus.$on('change',(msg) =>{
this.n = this.n+msg
})
},
template: `
<div>我是sibling2{{n}}</div>
`
}