22-v-model

 

 

<template>
  <button @click="flag = !flag">change {{ flag }}</button>
  <div>标题 {{ title }}</div>
  <!-- <Dialog v-model="flag"></Dialog> -->
  <!-- v-model.sunBySelf="flag" v-model支持自定义-->
  <Dialog v-model:title="title" v-model.sunBySelf="flag"></Dialog>
</template>

<script setup lang="ts">
  import Dialog from './dialog/Dialog.vue';
  import { ref } from 'vue'
  let flag = ref<boolean>(true)
  let title = ref<string>('测试内容doing')

</script>

<style lang="less" scoped>

</style>




<template>
  <div v-if="modelValue" class="dialog">
    <div class="dialog-header">
      <div>标题---{{title}}</div>
      <div @click="close">x</div>
    </div>
    <div class="dialog-content">内容</div>
  </div>
</template>

<script setup lang="ts">
type Props = {
  modelValue: boolean, // v-model="flag"
  title: string, //v-model:title="title"
  modelModifiers?: {
    sunBySelf:boolean //v-model.sunBySelf="flag"
  }
}
const PropsData = defineProps<Props>()

const emit = defineEmits(['update:modelValue', 'update:title'])

const close = () => {
  console.log(PropsData.modelModifiers?.sunBySelf)
  emit('update:modelValue', false)
  emit('update:title', '修改了内容')
}


</script>

<style lang="less" scoped>
.dialog {
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  &-header {
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  &-content {
    padding: 10px;
  }
}
</style>