vue.js - 传递给 Vue 中动态组件的 Prop 不是 react 性的

Question

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

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

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

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 绑定(bind)到组件的 prop，但是你正在修改 app.person.name，它是独立的，没有绑定(bind)到组件。

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 更改时使用react。