|
1 2 3 4 5 6 |
props: ['name'], data() { return { iName: this.name } }, |
name 值，但是子组件中的 iName 不会随之更改；所以要监听父组件传入数据的变化，随之更新子组件；|
1 2 3 4 5 6 |
watch: { // 监听父组件传入的数据，更新到本地 name(newVal, oldVal){ this.iName = newVal; } }, |
name ，子组件展示出来的数据（iName）会随之变化，但是子组件修改数据，父组件不会变化，所以需要监听子组件数据（iName）的变化，通知父组件进行更新|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 子组件中的监听 watch: { // 监听父组件传入的数据，更新到本地 name(newVal, oldVal){ this.iName = newVal; }, // 监听本地数据的变化，通知父组件更新 iName(newVal, oldVal) { this.$emit('update', newVal); } }, // 父组件中的更新 <test :name="name" @update="update"/> methods: { update(str) { this.name = str; } }, |
自定义组件中使用 v-model 进行双向数据绑定，相当于；
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<test v-model="selected" /> 相当于 <test :value="selected" @input="data=> selected=data"/> 所以子组件需要做的事情就是 1. 接收 value 数据 props: ['value'], 2. 将value 转成本地数据 data() { return { checked: this.value } }, 3. 监听 value 的变化，更新到本地数据， 监听 本地数据的变化，使用 input 事件通知父组件更新 watch: { value(newVal){ this.checked = newVal; }, checked(newVal){ this.$emit('input', newVal) } }, |
|
1 |
<input :title.sync="xx"/> |
拆开后
|
1 |
<input @update:title="data => xx=data" :title="xx"/> |
from:https://blog.csdn.net/qq_39125684/article/details/90380268