在 Vue 中传递给动态组件的道具不是反应式的

Question

我正在使用 Vue 的动态组件来根据要显示的内容来加载组件。由于这些组件都有不同的 props，我构建了一个对象并通过 v-bind 传递它，具体取决于我需要从原始状态模型中使用什么。

但是，当我这样做时，我失去了 Vue 道具数据流的反应性。下面的代码示例显示了一个示例，其中名称在标准组件上更改，但在动态版本上没有更改。

我希望这与复制到新对象中的字符串值有关，而不是对原始反应属性的引用。谁能建议我如何按预期进行这项工作？

Vue.config.productionTip = false;

Vue.component("example-component", {
    props: ["name"],
    template: '<span style="color: green;">{{name}}</span>'
    }
);

var app = new Vue({
    el: "#app",
    data: {
        person: {
            name: "William"
        },
        component: null
    }
});

// Load the dynamic component
setTimeout(function() {

    app.component = {
        is: 'example-component',
        props: { name: app.person.name }
    }

    // Change the name
    setTimeout(function() {
        app.person.name = "Sarah";
    }, 2000);

}, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
            
    <strong>Standard Component</strong><br />
    <example-component :name="person.name"></example-component><br /><br />

    <div v-if="component">
        <strong>Dynamic Component</strong><br />
        <component :is="component.is" v-bind="component.props"></component>
    </div>

</div>

Answer 1

这里有两个不同的对象person 和component，它们在app 组件的data 属性中声明。

app.component.props.name 绑定到组件的 prop，但您正在修改 app.person.name，它是独立的，不绑定到组件。

app.component.props 和app.person 是两个独立的对象实例，因此修改其中一个对象的属性不会影响另一个。

很难为您的问题提出合适的解决方案，因为您的示例太简单（而且有点做作）。只要您在不同对象之间复制 name 值，您想要的就不会起作用。

我会重做所有代码，也许改用computed property。但是只需最少的更改，您就可以做到这一点：

app.component = {
  is: 'example-component',
  props: {
    get name() { return app.person.name; }
  }
}

现在app.component.props.name 实际上是一个返回app.person.name 的getter 函数。 Vue 可以观察到这一点，并且会在 app.person.name 发生变化时做出反应。