为什么支柱在动态组件中没有反应？
我在另一个插槽中注入了一个动态组件，并将道具对象传递给它。但是，当我更新数据(一个数组)时，这个支柱没有在组件中被更新。
我似乎处理了两个不同的对象，但是数组是通过引用传递的，不是吗？
这是主要的组成部分
<template>
<Button @click="addWindows"></Button>
<Window v-for="window in windows" :key="window.id">
<component :is="window.name" v-bind="window.props" @onDeleteRow="handleDeleteRow"></component>
</Window>
</template>
<script>
export default{
data(){
return{
windows:[],
tableData:[
{
id: '0',
name: 'dog'
},
{
id: '1',
name: 'cow'
},
{
id: '2',
name: 'cat'
}
]
}
},
methods:{
addWindows(){
this.windows = [
{
id: 0,
name: 'Component1',
props: {
dataT: this.tableData
}
},
{
id: 1,
name: 'Component2',
props: {}
}];
},
handleDeleteRow(id){
this.tableData = this.tableData.filter(r => r.id != id);
}
}
}
</script>我希望在修改主组件中的dataT时，更新Component1中的this.tableData。
回答 2
Stack Overflow用户
发布于 2019-07-04 09:13:43
最初的答案是基于问题的早期版本
如果您使windows成为一个计算属性，它可以依赖于tableData。
export default {
data() {
return {
tableData: [
{
id: '0',
name: 'dog'
},
{
id: '1',
name: 'cow'
},
{
id: '2',
name: 'cat'
}
]
}
},
computed: {
windows () {
return [
{
id: 0,
name: 'Component1',
props: {
dataT: this.tableData
}
}, {
id: 1,
name: 'Component2',
props: {}
}
]
}
}
}如果不能使所有这些都成为计算属性(例如，因为需要能够修改它)，那么将其保持为data，只需使用计算属性来创建模板中所需的数组。在这种情况下，计算的属性将只是将数据的不同部分合并到正确的表单中。
在您的原始代码中，dataT: this.tableData行将无法工作，因为this.tableData还不存在，它只是undefined。这里没有惰性的计算，它需要在碰到这一行时解析到正确的对象。
即使它能够访问正确的对象，也于事无补，因为在handleDeleteRow中，您要重新分配tableData以指向另一个对象。传递'by reference‘与您用来标识对象的名称无关，它是指内存中的引用。
顺便说一句，v-on还支持对象语法，就像v-bind一样，因此您可以以类似的方式使onDeleteRow成为可选的。
基于编辑问题的更新
当你用addWindows写这个
props: {
dataT: this.tableData
}这将将当前的值this.tableData分配给dataT。该当前值将是一个数组，并且由于数组是引用类型，因此对该数组所做的任何修改都将应用，无论使用什么标识符来引用它。
然而，这句话..。
this.tableData = this.tableData.filter(r => r.id != id);..。不会修改该数组。相反，它为this.tableData分配了一个全新的数组。这将不会对dataT引用的数组产生任何影响，该数组保持不变。
有几种方法可以解决这个问题，包括使用计算属性。然而，属性获取器可能提供一个方便的技巧：
addWindows () {
const vm = this;
this.windows = [
{
id: 0,
name: 'Component1',
props: {
get dataT () {
return vm.tableData
}
}
},
{
id: 1,
name: 'Component2',
props: {}
}
];
}这将始终计算到tableData的当前值。Vue的反应性应该与这个额外的间接方向很好，它只是将其视为等同于直接访问tableData。
Stack Overflow用户
发布于 2019-07-04 08:45:24
TL；博士
问题在于你的约束。使用以下方法：
<component
:is="window.name"
:dataT="window.props.dataT"
@onDeleteRow="handleDeleteRow">
</component>解释
v-bind属性指定什么支柱绑定到什么值(或引用)。在您的示例中，您没有指定要绑定到什么道具的值，因此组件道具没有按预期绑定。
https://stackoverflow.com/questions/56883790
复制相似问题
腾讯云开发者
