vue3 双向绑定

方法1:

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-dialog :model-value="modelValue" persistent position="right">
      <q-card>
        <q-card-section>
          <div class="text-h6">Terms of Agreement</div>
          <q-space />
          <q-btn icon="close" flat round dense v-close-popup @click="closeAction" />
        </q-card-section>

        <q-separator />

        <q-card-section style="max-height: 50vh" class="scroll">
          <p
            v-for="n in 15"
            :key="n"
          >Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.</p>
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn label="Decline" color="primary" v-close-popup @click="closeAction"/>
          <q-btn flat label="Accept" color="primary" v-close-popup @click="closeAction"/>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    modelValue: {
      type: Boolean,
      require: true
    }
  },

  setup(props, context) {
    const closeAction = () => {
      context.emit('update:model-value', false);
      console.log('closeAction');
    };
    return {
      closeAction,
    };
  },
});
</script>

<style lang="scss" scoped>
</style>

使用

<mine-filter v-model="showFilter"/>

方法2:

<template>
  <div class="q-pa-md q-gutter-sm">
    <q-dialog :model-value="show" persistent position="right">
      <q-card>
        <q-card-section>
          <div class="text-h6">Terms of Agreement</div>
          <q-space />
          <q-btn icon="close" flat round dense v-close-popup @click="closeAction" />
        </q-card-section>

        <q-separator />

        <q-card-section style="max-height: 50vh" class="scroll">
          <p
            v-for="n in 15"
            :key="n"
          >Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.</p>
        </q-card-section>

        <q-separator />

        <q-card-actions align="right">
          <q-btn label="Decline" color="primary" v-close-popup @click="closeAction"/>
          <q-btn flat label="Accept" color="primary" v-close-popup @click="closeAction"/>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    show: {
      type: Boolean,
      require:true
    }
  },

  setup(props, context) {
    const closeAction = () => {
      context.emit('update:show', false);
      console.log('closeAction');
    };
    return {
      closeAction,
    };
  },
});
</script>

<style lang="scss" scoped>
</style>

<filter-data :show="showFilter" v-model:show="showFilter"/>

父组件中：

const showFilter = ref(false);