下面是我目前的 struct (不起作用).
父组件:
<template>
<field-input ref="title" :field.sync="title" />
</template>
<script>
import Field from './input/Field'
export default {
components: {
'field-input': Field
},
data() {
return {
title: {
value: '',
warn: false
}
}
}
}
</script>
子组件:
<template>
<div>
<input type="text" v-model="field.value">
<p v-bind:class="{ 'is-invisible' : !field.warn }">Some text</p>
</div>
</template>
<script>
export default {
props: ['field']
}
</script>
这些要求是:
- 如果父对象的数据
title.warn值在父对象中发生更改，则应更新子对象的class绑定(field.warn). - 如果子元素的
<input>被更新(field.value)，那么父母的title.value应该被更新.
实现这一目标最干净的解决方案是什么？