vue.js - Vue组合api自定义v-model

Question

我正在使用 Nuxt，@nuxtjs/composition-api它允许将组合 API 与 Vue 2 一起使用。我有这个模态组件，我想v-model在它上面使用自定义，以了解模态是否打开。我也想将它分配给一个局部状态变量，这样我就可以从我的组件内部以及父级中关闭我的模态。

我创建了一个 ref 调用，它使用我的ed propopen进行初始化。v-modelisOpen

我添加了一个手表，以便每当open发生更改时，它都会调度一个更改事件。

open我的问题是，目前，当我props.isOpen从父级更改时，我的组件不会更新。

我想使用computed从道具而不是动态获取值ref，但是我不能在closeModal中改变计算变量。

在这种情况下我该怎么办？

<template>
  <div class="modal" :class="{ open }">
    <div class="modal__content">
      <UiIcon
        type="x"
        @click.native="closeModal"
      />
      <span v-if="title" class="modal__title">{{ title }}</span>
      <p class="modal__paragraph">
        <slot>
          <span>Modal content</span>
        </slot>
      </p>
    </div>
  </div>
</template>
    
<script lang="ts">
import { computed, defineComponent, ref, watch } from '@nuxtjs/composition-api';
import UiIcon from '~/components/ui/UiIcon.vue';

export default defineComponent({
  name: 'UiModal',
  components: { UiIcon },
  model: {
    prop: 'isOpen',
    event: 'change',
  },
  props: {
    title: {
      type: String,
      default: undefined,
    },
    isOpen: {
      type: Boolean,
      default: false,
     },
    },
    setup(props, { emit }) {
      const open = ref(props.isOpen);
    
      const closeModal = () => {
        open.value = false;
      };
    
      watch(open, (isOpen) => emit('change', isOpen));
       
      return {
        open,
        closeModal,
      };
    },
  });
</script>

标签： vue.jsvuejs2nuxt.jsvue-composition-api