共计 1945 个字符,预计需要花费 5 分钟才能阅读完成。
Vue 父子组件通信,形式有三种:
形式一:
子组件
<template>
<div>
<div> 儿子:{{msg}}</div>
<button @click="childBtn"> 儿子 </button>
</div>
</template>
<script>
export default {
name: 'Child',
props: {
msg: {
require: true,
type: String,
default () {return ''}
}
},
model: {
prop: 'msg',
event: 'changeMsg'
},
methods: {childBtn () {if (this.msg === 'father') {this.$emit('changeMsg', 'mother')
} else {this.$emit('changeMsg', 'father')
}
}
}
}
</script>
父组件
<template>
<div>
<child :msg="msg" @changeMsg="changeMsg"></child>
<div> 父亲:{{msg}}</div>
<button @click="fatherBtn"> 父亲 </button>
</div>
</template>
<script>
import Child from '@/components/Child'
export default {
name: 'Index',
components: {Child},
data () {
return {msg: ''}
},
methods: {changeMsg (e) {this.msg = e},
fatherBtn () {if (this.msg === 'father') {this.msg = 'mother'} else {this.msg = 'father'}
}
}
}
</script>
父组件通过 prop 批改子组件的数据状态,子组件通过 $emit 发送事件(event)信号,告诉父组件批改父组件内的数据状态,同时父组件须要监听相干的 event。
形式二:
应用 v -model 进行双向绑定,v-model 是一种语法糖
<child v-model="msg"></child>
等价于
<child :value="msg" @input="changeMsg"></child>
然而,如果咱们须要指定子组件的 prop,和监听的 event 应该怎么做呢?
只须要在子组件中指定 model 即可
model: {
prop: 'msg',
event: 'changeMsg'
}
残缺子组件代码如下:
<template>
<div>
<div> 儿子:{{msg}}</div>
<button @click="childBtn"> 儿子 </button>
</div>
</template>
<script>
export default {
name: 'Child',
props: {
msg: {
require: true,
type: String,
default () {return ''}
}
},
model: {
prop: 'msg',
event: 'changeMsg'
},
methods: {childBtn () {if (this.msg === 'father') {this.$emit('changeMsg', 'mother')
} else {this.$emit('changeMsg', 'father')
}
}
}
}
</script>
形式三:
应用 .sync,也是一种语法糖
<child :msg.sync="msg"></child>
等价于
<child :msg="msg" @update:msg="changeMsg"></child>
子组件只须要 emit(‘update:msg’) 即可。
残缺子组件代码如下:
<template>
<div>
<div> 儿子:{{msg}}</div>
<button @click="childBtn"> 儿子 </button>
</div>
</template>
<script>
export default {
name: 'Child',
props: {
msg: {
require: true,
type: String,
default () {return ''}
}
},
methods: {childBtn () {if (this.msg === 'father') {this.$emit('update:msg', 'mother')
} else {this.$emit('update:msg', 'father')
}
}
}
}
</script>
思考,形式二 v -model 与形式三 sync 有什么区别呢?
1、v-model 只能指定一个属性,而 sync 能够应用在任意多个属性上。
2、v-model 更多的是应用在示意该组件特有的“value”的变动,sync 针对组件各种各样状态的传递。
正文完