v-model 与 defineEmits 如何使用

[wfly]

这种方式的 v-model:show="show" 值更新不生效
使用组件的页面

 <v-mask v-model:show="show" :maskCloseAble="maskCloseAble" :maskBgColor="maskBgColorStatus ?
      'rgba(0, 0, 255, 0.1)' : 'rgba(0, 0, 0, 0.6)'" @update:show="updateShow"></v-mask>

组件页面

<script setup lang="ts">
  import { reactive, watch, ref, computed, toRefs, watchEffect } from '@vue/composition-api';

  interface Props {
    show?: boolean;
  }

  const {
    show
  } = defineProps<Props>();

  function handleClick () {
    emits('update:show', false);
    emits('click');
  }
</script>

[ZHAO Jin-Xiang]

vue 2 不存在 v-model，你可以用 :show.sync="show"

[wfly]

vue 2 不存在 v-model，你可以用 :show.sync="show"

好的。谢谢

[wfly]

麻烦看下这个代码示例

使用组件的页面

<template>
  <div id="app">
    <HelloWorld :show.sync="show" />
  </div>
</template>

<script setup lang="ts">
  import { ref } from '@vue/composition-api'
  import HelloWorld from './components/HelloWorld.vue'

  let show = ref(true);
</script>

组件代码

<template>
  <div>
    这是子组件
    <div v-if="show">
      11
    </div>
    <div v-else>
      22
    </div>
    {{testShow}}
    <div @click="close">这是子组件的按钮，他点击触发一个关闭事件 -</div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed } from '@vue/composition-api';

  const { show } = defineProps<{show: boolean}>();

  const emits = defineEmits(['update:show']);

  const testShow = computed(() => {
    console.log('这里触发了');
    return show ? '1' : '2'
  });

  const close = () => {
    emits('update:show', false);
  };
</script>

首先控制台会报这个错误

其次

const testShow = computed(() => {
    console.log('这里触发了');
    return show ? '1' : '2'
  });

这段代码在 show 变化的时候并没有生效，这个是什么原因呢

这个代码其他的文件都是使用的此仓库 examples - vue-cli 中的代码，这个问题的原因，貌似在组件的 computed 或者 watch 中监听不到 :show.sync 这种数据的变化

[ZHAO Jin-Xiang]

禁止解构 props

[wfly]

defineProps

禁止解构 props 相当于只能用 withDefault 了，不解构初始值没法赋值，相当于 defineProps 这个实验性功能不支持的感觉

[ZHAO Jin-Xiang]

只要你用 vue 的 setup 稳定版，任何 setup 都禁止解构 props

[ZHAO Jin-Xiang]

缺少最新的讨论，v-model 的问题已经解决，故先关闭了