由父传递给子 props 然后子更新数据后重新传递给父
index.vue
<template>
<!--
<Chidren :title="pageTitles"
@update:title="pageTitles = $event" />
-->
<!-- 以下写法是以上的简写 -->
<Chidren v-model:title="pageTitles" />
</template>
<script>
import Chidren from './children1.vue'
export default {
data () {
return {
pageTitles: "I'm title"
}
},
components: {
Chidren
}
}
</script>
children1.vue
<template>
<div>children:{{ title }}</div>
<input type="text" v-model="title" placeholder="请输入title" />
</template>
<script>
export default {
props: {
'title': {
type: String,
default: ''
}
},
mounted () {
console.log('children title:', this.title)
}
}
</script>