福州模板做网站_网络推广服务内容_网站推广多少钱_淘宝指数查询

组件上的 v-model 也可以接受一个参数：

<MyComponent v-model:title="bookTitle" />

在这种情况下，子组件应该使用 title prop 和 update:title 事件来更新父组件的值，而非默认的 modelValue prop 和 update:modelValue 事件。

子组件代码：

<script>
export default {props: ['title'],emits: ['update:title'],
}
</script><template><input type="text":value="title"@input="$emit('update:title',$event.target.value)"/>
</template>

父组件代码：

<script>
import MyComponent from './MyComponent.vue'export default {components: { MyComponent },data() {return {title: 'v-model argument example'}}
}
</script><template><h1>{{ title }}</h1><MyComponent v-model:title="title"/>
</template>

子组件改成另一种实现 v-model 的形式：

<script>
export default {props: ['title'],emits: ['update:title'],computed:{title:{get(){return this.title},set(value){this.$emit('update:title',value)}}}
}
</script><template><input type="text" v-model="title"/>
</template>