2

我有一个像这样初始化的组件

<custom :opts="{map: false}"></custom>

并且有与此类似的 HTML

<template id="custom">
    <div v-if="opts.map">
    I'm awesome
    </div>
    <button v-on:click="show"></button>
</template>

在哪里

function show(){
    this.opts = {map:true} // (1) <-- This is working and I could see hidden div
    this.opts.map = true // (2) <-- For some reason not working
    Vue.set(this.opts, 'map', true) // (3) <-- Still not working
}

所以我的问题是为什么变体 2不起作用，我应该改变什么以使我的控件对按钮单击时的值重置做出反应。或正确解释为什么（1）有效，但（2）无效 - 也将被接受为答案。

4

2 回答 2

1

代码（所有 3 个版本）的真正问题是从组件内更改组件的属性。在惯用的 Vue 中，只有父级应该更改属性。如果组件需要进行更改，它应该向父级发出一个事件并让父级进行必要的更改。否则，在哪个组件“拥有”该属性方面存在歧义。

单向数据流

所有的 props 在子属性和父属性之间形成一个单向向下的绑定：当父属性更新时，它会向下流向子属性，但不会反过来。

通过事件向父母发送消息

于 2018-09-22T00:06:46.153 回答
0

可以在这里偏离基地，但我相信这是因为在 vue 组件props中没有反应性，所以它们的对象没有被深入观察。或者更确切地说，它们“有点反应”，重新分配根 prop 确实会导致 DOM 更新，但预计不会手动完成，并且在开发构建中执行此操作时会看到警告：

[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“……”

至于为什么道具一开始没有完全反应：https ://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

要解决整个问题，您必须将任何必要的道具传递给组件data，如果这些道具作为嵌套对象传递，您可能还希望完全避免从组件内部改变它们，因为它将传播到父级，除非明确提及，可能是坏消息的来源。

于 2018-09-21T20:08:27.730 回答