如何更改Vue 3中useSlot()的属性

lp0sw83n 于 2023-01-31 发布在 Vue.js

关注(0)|答案(2)|浏览(595)

我有一个关于如何获得从useSlots()中检索到的 prop 更改的问题
这是一个声明父组件的文件，子组件作为父组件的插槽。2我也传递了一些 prop 给子组件。

<script setup>
import { ref } from "vue";
import Parent from "./components/Parent.vue";
import Child from "./components/Child.vue";

const name = ref("Nagisa");
function updateName() {
  name.value = "Daniel";
}
</script>

<template>
  <Parent><Child :name="name"></Child></Parent>
  <hr />
  <button @click="updateName">update name</button>
  <p>name: {{ name }}</p>
</template>

在Parent组件中，由于一些限制，我需要调用render function并重新存储slot中声明的内容。
x一个一个一个一个x一个一个二个x
这样可以正确地使用父组件渲染子组件，但子组件在其属性值更改时不会更新

单击updateName按钮后

有没有办法从useSlot（）捕捉并更新Parent组件中的Child组件的prop变化？

vue.js

来源：https://stackoverflow.com/questions/74049920/how-to-get-a-change-of-prop-of-useslot-in-vue-3

2条答案

按热度按时间

7rtdyuoh1#

你在Parent中对slot的使用是不正确的。slot的全部意义是渲染Parent不知道的 * 一些 * 东西（例如，你传递给它的任何东西）。所以直接渲染Child是错误的（因为它迫使Parent总是渲染Child而不是slot内容）
第二个问题是在setup中使用const defaultSlot = slots.default();-插槽是函数和这些函数的参数（比如 prop 和其他来自父作用域的React性数据）在模板重新呈现时会发生变化。因此，每次父作用域重新呈现时都需要执行 *slot函数 *。但是setup只运行一次。这就是为什么您看不到子作用域的任何更新。而是直接在渲染函数中使用插槽：

// Parent component
<script setup>
import { h, useSlots } from "vue";

const slots = useSlots();

const render = () => {
  return h("div", {}, slots.default ? slots.default() : null);
};
</script>

赞(0）回复(0）举报 2023-01-31

bnlyeluc2#

除了@Michal Levy提供的优秀答案外，您还可以将对default()或任何其他named slot的调用封装在computed ref中，这将允许查找是惰性的、缓存的、可从标准监视函数调用的、在渲染函数之外使用的，以及直接放在SFC模板中。

<script setup>
import { h, useSlots } from "vue";

const slots = useSlots();

const slotProps = computed(()=>slots.default ? slots.default().props : undefined)

watch(props, value), {
  console.log('props', value)
}, {immediate: true})

</script>

<template>
  <h1>Dynamic Slot Props</h1> 
  <div>{{slotProps}}
</template>

赞(0）回复(0）举报 2023-01-31

我来回答

如何更改Vue 3中useSlot()的属性

2条答案

相关问题

热门标签

最新问答