两次watch的意义何在

Question

对于el-dialog组件的显示状态为什么用两次watch。直接修改不是更简洁？
const dialogVisible = ref(false)
@click="dialogVisible = ! dialogVisible"
如有向父组件传参需求 直接传不就可以了？
let emits = defineEmits([‘update:visible’])
let fnOutData = () => {
emits(‘update:visible’, dialogVisible.value)
}

Answer 1

赵日天l 2022-08-21 17:30:07

<template>
    <el-button typeof="primary" @click="open">
    <slot></slot>
</el-button>

<el-dialog v-model="visible" :title="title" width="30%" @close="close">111</el-dialog>
</template>

<script setup lang="ts">
const props = defineProps<{
    title: string,
    visible: boolean
}>()


const emits = defineEmits(['update:visible'])
const open = () => emits('update:visible', true)
const close = () => emits('update:visible', false)
</script>

这样写不香吗,还两个watch

• 五月的夏天 #1

  肯定不香啊，你的open和close不是做的同一个逻辑？为什么要写成两个方法。而且你不是多绑定了两个方法？

Answer 2

五月的夏天 2022-04-19 16:26:38

最好不要直接修改父组件的数据 。

• 提问者 jinpu #1

  const dialogVisible = ref(false)只在子组件生效。只对显示隐藏弹出页面起作用。