Vue3树形组件插槽内Input双向绑定响应失效问题求助

问题根源分析 #

1. 非响应式数据导致更新不触发：测试组件中geographicDataList是计算属性返回的静态对象数组，这些对象未被Vue响应式系统包裹。通过v-model修改item.description时，值本身会变化，但Vue无法检测到对象属性的变更，导致树形组件的text计算属性不会重新计算，视图也就不会更新。强制刷新:key能生效，是因为强制重建了整个组件，重新读取了最新的属性值。

2. 不良的v-for key使用：树形组件循环节点时用index作为key，会让Vue复用组件实例，即使item属性变化，也可能因为组件复用逻辑导致响应式更新异常。

解决方案 #

方案一：将静态数据转为响应式数据 #

把测试组件中的geographicDataList从计算属性移到data中，让Vue自动将其转为响应式对象：

// tree-tester.vue 修改后的<script>部分
<script>
import { PnTree } from './tree.vue';

export default {
    data(){
        return {
            refresher: 0,
            geographicDataList: [{
                code: 'CND',
                description: 'Canada',
            },{
                code: 'USA',
                description: 'USA',
            },{
                code: 'AL',
                description: 'Alabama',
                parentCode: 'USA',
            },{
                code: 'AK',
                description: 'Alaska',
                parentCode: 'USA',
            }]
        };
    },
    computed: {
        rootItems(){
            return (this.geographicDataList || [])
                    .filter(x => !x.parentCode)
                    ;
        },
    },
    // 其余方法、钩子保持不变
};
</script>

方案二：优化v-for的key使用 #

在tree.vue和tree-node.vue中，将循环的key从index改为item的唯一标识，避免组件复用异常：

修改tree.vue

<template>
    <div :class="wrapperClasses">
        <tree-node v-for="(item, index) in items" 
                   :key="getItemKey(item)"
                   :item="item"
                   <!-- 其余props、事件绑定不变 -->
        >
            <!-- 插槽传递部分不变 -->
        </tree-node>
    </div>
</template>

<script>
// ... 其余导入、组件注册不变
export default {
    // ... props、computed不变
    methods: {
        getItemKey(item) {
            return typeof this.keyAccessor === 'function' 
                ? this.keyAccessor(item) 
                : item[this.keyAccessor];
        }
    }
};
</script>

修改tree-node.vue

<template>
    <!-- 根节点部分不变 -->
    <div class="children">
        <tree-node v-for="(child, index) in childrenList" 
                   :key="getItemKey(child)"
                   :item="child"
                   <!-- 其余props、事件绑定不变 -->
        >
            <!-- 插槽传递部分不变 -->
        </tree-node>
    </div>
</template>

<script>
// ... 其余导入、组件定义不变
let TreeNode = {
    // ... props、data、computed不变
    methods: {
        getItemKey(item) {
            return typeof this.keyAccessor === 'function' 
                ? this.keyAccessor(item) 
                : item[this.keyAccessor];
        },
        // 其余方法不变
    },
};
// ... 组件注册不变
</script>

验证效果 #

完成上述修改后，在input中修改值时，节点的文本内容会自动同步更新，无需再通过:key强制刷新组件。

内容的提问来源于stack exchange，提问作者Trio