Vue3 之组件 v-model
作者:互联网
Vue3 之组件 v-model
在 3.x 中,自定义组件上的 v-model
相当于传递了 modelValue
prop 并接收抛出的 update:modelValue
事件:
父组件
<template> <!-- 父组件--> <p> 在 3.x 中,自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的 update:modelValue 事件: </p> <p>{{feiTitle}}</p> <Bar v-model="feiTitle"/> </template> <script setup> import Bar from './bar.vue' import {ref} from "vue"; const feiTitle = ref({fei:"初始值"}); </script>
子组件
<template> <p>子组件</p> <p> <button @click="upFei"> 点击更新父组件 v-model="pageTitle"</button> </p> </template> <script setup> const props = defineProps({ modelValue: { type: Object, default: () => {} }, }) const emits = defineEmits(['update:modelValue']) const upFei = () => { emits('update:modelValue', {xx1: "值foo", xx2: "值bar"}); } </script>
标签:const,update,Vue3,组件,model,modelValue 来源: https://www.cnblogs.com/dafei4/p/16545636.html