How to use v-model in vue3

 Write normally where the parent component uses the child component

<content  v-model="isClose" ></content> 

 There are two following points to note about subcomponents:

<template>
  <div class="header">
    <el-icon  v-if="modelValue" @click="toggle"><Expand /></el-icon>
    <el-icon v-else  @click="toggle"><Fold /></el-icon>
  </div>
  <div class="wrapper">
    <router-view></router-view>
  </div>
</template>

<script setup>
const props =defineProps({
  modelValue:{  //1、子组件固定用modelValue接收
    type:Boolean,
    default:false
  }
})
const emits =defineEmits(['update:modelValue']) //emits的方法固定是'update:modelValue'
const toggle =()=>{
  emits('update:modelValue',!props.modelValue)
}
</script>

Guess you like

Origin blog.csdn.net/melissaomy/article/details/129310891