不使用
.sync
修饰符时父子组件相互通信
<div id="app">
{
{ fathermessage }}
<son :sonmessage="fathermessage" @change="beginChange"></son>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('son', {
template: `
<div>
<div>-------------</div>
<div>我是子元素</div>
<div>{
{ sonmessage }}</div>
<button @click="change">点我</button>
</div>
`,
props: {
sonmessage: {
type: String
}
},
methods: {
change () {
this.$emit('change', 'sonmessage')
}
}
})
let vm = new Vue({
el: '#app',
data: {
fathermessage: 'fatherMessage'
},
methods: {
beginChange (value) {
this.fathermessage = value
}
}
})
</script>
未点击按钮前的html界面: