vue3 props 双向绑定
官网:https://cn.vuejs.org/guide/components/v-model.html
首先,引用官网一句话:在大多数场景下,子组件应该抛出一个事件来通知父组件做出改变。 一般情况父子组件props 是父组件传递值给子组件,子组件使用。有个别情况子组件更新父组件的传值。
父组件:
变量:const testValue = ref(false)
单向传递:
<test-com :checked="testValue"></test-com>
子组件更新: v-model:title
<test-com v-model:checked="testValue"></test-com>子组件:
<switch :checked="props.checked" @change="switchChange" /> // emits const emit = defineEmits(["update:checked"]); //props const props = defineProps({ checked:{
type:Boolean,
default: false,
} }) // 事件触发更新 const switchChange =e => { // 更新绑定值 emit("update:checked", e.detail.value); };
使用emits:update:name, name为父组件绑定值的name名,更新绑定值。
惟精惟一,允执厥中