如何在 vueJS 中使用 props 的对象动态更改组件

Question

你知道如何用object prop动态改变组件

App.vue

<template>
  <div id="app">
    <component :is="current['test'].target.name"> </component>
    <input type="button" value="click me" @click="change" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";
import Comp from "./components/Comp.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
    Comp,
  },
  data() {
    return {
      current: {},
    };
  },
  created() {
    this.current["test"] = {
      index: 0,
      target: {
        name: "Comp",
      },
    };
  },
  methods: {
    change() {
      const r =
        this.current["test"].target.name === "HelloWorld"
          ? "Comp"
          : "HelloWorld";
      this.current["test"].target = {
        name: r,
      };
      console.log(this.current["test"]);
    },
  },
};
</script>

Comp.vue

<template>
  <p>Template 2</p>
</template>

HelloWorld.vue

<template>
  <p>Template 1</p>
</template>

https://codesandbox.io/s/clever-water-dgbts?file=/src/components/HelloWorld.vue:0-42

对象的值会正确改变，但组件不会改变。

谢谢

Answer 1

这里的问题是属性 test 未在数据定义中的对象 current 上定义 - 您在 created() 函数中设置定义。这意味着 Vue 不知道为该属性创建响应式 getter/setter。

将您的数据定义更改为：

data() {
  return {
    current: {
      test: {
        index: 0,
        target: {
          name: "Comp"
        }
      }
    }
  };
}

由于 Vue 的反应方式（需要预定义的属性），我建议不要将属性作为字典项访问，即使用：

current.test.target.name

而不是

current['test'].target.name

有关 Vue 反应性的更多信息，请参阅此页面：link