Vue3无构建版子组件清空props数组后视图不更新求助

问题原因 #

• Vue遵循单向数据流规则，props是父组件传递给子组件的只读数据，子组件不能直接修改props。你在子组件里执行this.names = []，本质是在子组件实例上创建了一个新的局部变量names，覆盖了props中的同名属性，但并没有修改父组件的userBoundaries数组。因为父组件的数据源没变化，所以视图不会更新。
• 另外，Vue对数组的响应式追踪依赖于数组变异方法（比如push、pop、splice等），直接替换数组（赋值新数组）在子组件里不会触发父组件的响应式更新，更何况这里是错误地覆盖了props。

解决方案 #

方案1：子组件触发事件，父组件修改原数组（推荐，符合Vue设计规范） #

子组件通过$emit触发自定义事件，父组件监听该事件并修改自己的数据源：

修改子组件代码：

const TestComponent = {
    props: ['names'],
    template: `<div>{{names.length}}</div><input type="button" value="remove" v-on:click="removeAllNames()"/>`,
    methods: {
        removeAllNames() {
            // 触发自定义事件，通知父组件清空数组
            this.$emit('clear-names');
        }
    }
}

修改父组件的模板和方法：

<div id="app">
      <input type="button" v-on:click="LoadBoundaryList();" value="Add names" />
      <!-- 监听子组件的自定义事件，绑定父组件的清空方法 -->
      <test-component :names="userBoundaries" @clear-names="clearAllNames"></test-component>
</div>

const RootComponent = {
    data() {
        return {
            searchQuery: null,
            userBoundaries: []
        }
    },

    components: {
      TestComponent
    },
    methods: {
        LoadBoundaryList () {
            for (var i = 0; i < 14; i++) {
                this.userBoundaries.push("BoundaryName");
            }
       },
       clearAllNames() {
           // 父组件修改自己的数据源，触发响应式更新
           this.userBoundaries = [];
           // 或者用变异方法：this.userBoundaries.splice(0);
       }
    }
}

方案2：使用数组变异方法修改props数组（不推荐，仅临时测试用） #

如果只是临时测试，可以在子组件里用数组的变异方法直接修改原数组（因为数组是引用类型，修改原数组会影响父组件）：

methods: {
    removeAllNames() {
        // 用splice方法清空数组，这是Vue能追踪到的变异操作
        this.names.splice(0);
    }
}

但这种方式违反了单向数据流原则，会让数据流向变得不清晰，不利于项目维护，实际开发中不建议使用。

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