我意识到我的props传递到一个组件,并在组件中更改,可能会冒泡。这在文档中提到。
当对象和数组作为prop传递时,虽然子组件不能改变prop绑定,但它将能够改变对象或数组的嵌套属性。
我在Vue Playground上重新创建了一个类似的案例。正如你所看到的,在Comp.vue
组件中推送'hello'
会改变父App.vue
中的prop值。
文档中没有建议打破这种绑定的方法。我认为在组件中创建单一引用(从props对象)会打破这种链接,但正如代码所示,情况并非如此。
真正密封元件的正确方法是什么?
注意事项:我需要组件中的变量是React性的,以便在组件模板中使用它们(并在运行时修改它们)这在another question及其答案中提到,但对于像我这样的嵌套数组对象没有解决方案。
2条答案
按热度按时间5cnsuln71#
我设法通过将props分散到组件的reactive变量中来打破React性链接。
字符串
从那时起,
books
在组件中是React性的,并继承props值,但它的更改不会传播回父组件。z6psavjg2#
首先,我不是很清楚你想问什么,你在操场上的代码告诉我,你可能想使用可写计算,
const name = ref(props.data.Name)
只会创建一个以props.data.Name
为默认值的新ref,所以当props更新时它不会改变。那么关于你的问题
真正密封元件的正确方法是什么?
我认为改变prop的属性不是一个好方法,但是vue允许你这样做。好的方法是用event更新值。
v-model
也是一个prop和一个eventv-model:visible="xxx"
=>:visible="xxx"
@update:visible="xxx"
你可以在你的组件中创建一个引用,并观察你的 prop ,当引用改变时,做一个事件来询问父组件,当 prop 改变时更新你的引用。而且它已经在useVModel in @vue/use中实现了,我建议你可以尝试使用它并阅读他们的代码。