vue3 useVModel 实现父子组件双向数据绑定。

子组件触发 click 事件之后传值给父组件。

子组件代码

  <div @click="changeChecked()">
    <i v-if="checked" class="iconfont icon-checked"></i>
    <i v-else class="iconfont icon-unchecked"></i>
    <span v-if="$slots.default"><slot /></span>
  </div>
<script setup>
import { useVModel } from "@vueuse/core";
import {  defineProps, defineEmits } from "vue";
const emit = defineEmits(["update:modelValue",change]);

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});

// @vueuse/core 的实现
   // 使用 useVModel 实现双向数据绑定 v-model 指令
    // 1. 使用 props 接收 modelValue
    // 2. 使用 useVModel 来包装props中的 modelValue 属性数据
    // 3. 在使用 checked.value就是使用父组件数据
    // 4. 在使用 checked.value = '数据' 赋值的时候，就会自动触发 emit('update:modelvalue', '数据')
    // 5. 也可以手动触发别的事件 例如这里的 change
const checked = useVModel(props,'modelValue',emit)
const changeChecked=()=>{
    const newValue = !checked.value
    // 通知父组件
    checked.value = newValue
    // 让组件触发 change 事件
    emit('change',newValue)
}
</script>

父组件代码

<template>
<div class='sub-category'>
    <div class="container">
      <!-- 复选框 -->
      <XtxCheckBox v-model="isAllChecked" @change="handleChange">
      {{isAllChecked}}
      </XtxCheckBox>
    </div>
 </div>
</template>
<script setup>
import {ref}from 'vue'
import XtxCheckBox from '@/components/library/xtx-check-box.vue';
const isAllChecked = ref(true)
const handleChange=(val)=>{
  console.log('Change',val);
}
</script>
<style scoped lang="less"></style>

子组件触发事件的时候在vue devtools 里面观察父组件的数据也发生改变。