两次watch的意义何在

来源：2-6 图标选择器-巧用两次watch控制弹框的显示与隐藏

jinpu

2022-04-19

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

写回答

2回答

赵日天l

2022-08-21

<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

五月的夏天

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

2022-08-22

共1条回复