如何封装一个Vue组件？ （又名如何处理指针传递的 props）

Question

我意识到我的 props 传递给了一个组件，并在组件中进行了更改，可能会冒泡。这是文档中提到的。

当对象和数组作为 props 传递时，虽然子组件无法改变 prop 绑定，但它将能够改变对象或数组的嵌套属性。

我在 Vue Playground 重新创建了一个类似的案例。正如您所看到的，在

'hello'

组件中按下

Comp.vue

会更改父级

App.vue

中 prop 的值。

文档没有建议打破这种绑定的方法。我认为在组件中（从 props 对象）创建单一引用会破坏该链接，但正如代码所示，情况并非如此。

真正密封组件的正确方法是什么？

注意：我需要组件中的变量具有反应性，以便在组件模板中使用它们（并动态修改它们），这在另一个问题及其答案中提到，但对于具有以下属性的对象没有解决方案：嵌套数组就像我的例子一样。

Answer 1

首先，我不太清楚你想问什么，你在操场上的代码告诉我你可能想使用可写计算，

const name = ref(props.data.Name)

只会创建一个以

props.data.Name

为默认值的新引用，因此当props更新时它不会改变。

那么关于你的问题

真正密封组件的正确方法是什么？

我认为改变 prop 的属性不是一个好方法，但是 vue 允许你这样做。最好的方法是用事件更新值。并且

v-model

也是一个道具和一个事件

v-model:visible="xxx"

=>

:visible="xxx"

@update:visible="xxx"

您可以在组件中创建一个引用并观察您的道具，当引用更改时，创建一个事件来询问父组件，当道具更改时更新您的引用。而且它已经在@vue/use的useVModel中实现了，我建议你可以尝试使用它并阅读他们的代码。

Answer 2

我通过将 props 分散到组件的反应变量中，成功地打破了反应性链接。对于 Vue Playground 中提到的代码，这意味着拥有

const books = ref([...props.data.Books])

从那时起，

books

在组件内起反应并继承 pro^ps 值，但其更改不会传播回父级。