Question

我正在使用Vue的动态组件来加载要显示的组件，具体取决于要显示的内容。由于这些组件都具有不同的道具，因此我将根据原始状态模型需要使用的对象来构建对象并通过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发生变化时做出反应。

传递给Vue中动态组件的道具没有反应性

1 个答案: