使用组合 API 更改 vue.js 中组件的道具

Question

如何更改组件的 prop 值并将更改通知这些组件？

父.vue

<script setup>
import Child from './Child.vue'

const finished = ref(false)

function submit() {
    finished.value = true;
}
</script>

<template>
    <Child :open="finished">
    <button @click="submit">Klick</button>
</template>

孩子.vue

<template>
    <div v-if="open">Dies ist ein Test.</div>
</template>
  
<script setup>
import { ref } from 'vue'

const props = defineProps(['open'])

const open = ref(props.open)
</script>

当我单击按钮时，值会发生变化，但不会通知子组件。 console.log(open)仍然是false 。

我正在使用 Vue.js 版本 3 和 API。

Answer 1

您不需要使用ref进行分配，您可以在props.open中使用props.open 。

<template>
  <div v-if="props.open">Dies ist ein Test.</div>
</template>
  
<script setup>
import { ref, defineProps } from 'vue'

const props = defineProps(['open'])
</script>

但是，如果你想计算这个道具，你可以使用computed作为Boussadjra Brahim的第一个答案。

Answer 2

Child 组件中存在一些冲突，您有一个名为open的道具和一个具有相同名称的 ref 属性，在这种情况下，它优先考虑 ref ，将另一个属性重命名为isOpen并将其定义为计算：

<template>
    <div v-if="isOpen">Dies ist ein Test.</div>
</template>
  
<script setup>
import { computed } from 'vue'

const props = defineProps(['open'])

const isOpen =  computed(()=>props.open)
</script>

演示