传递给 Vue 动态组件的 props 不是响应式的

Question

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

然而，当我这样做时，我失去了 Vue 的 props 数据流的反应性质。下面的代码示例显示了一个示例，其中名称在标准组件上发生了变化，但在动态版本上没有发生变化。

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

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在不同对象之间复制值，您想要的就不会起作用。

我会重做所有代码，也许会使用计算属性来代替。但是只需进行最少的更改，您就可以做到这一点：

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

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