vue3 props 双向绑定

发布时间 2023-04-27 10:35:57作者: 红色的风

官网: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名,更新绑定值。