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>

Vue3中 v-model 官方链接

 

 

Vue3中 v-model 官方链接