Vue.js - 将组件保存到变量中

Question

我来自React背景，想知道如何模拟这行代码：var modal = <Login/>

目前我已经有了以下代码，但是变量的输出结果是一个字符串：

<template src="./App.html"></template>

<script>
  import 'jquery'
  import 'uikit'
  import 'uikit/dist/css/uikit.min.css'

  import Login from '@/Login.vue'
  import Register from '@/Register.vue'

  export default {
    name: 'app',
    components: {
        "Login": Login,
        "Register": Register
    },
    data: function () {
        return {
            message: "first",
            modal: {
                body: "test",
                title: "body"
            }
        }
    },
    methods: {
        modal_open: function(type) {
            if (type === "login")
            {
                this.modal = {
                    body: Login,
                    title: "login"
                }
            }
            else
            {
                this.modal = {
                    body: Register,
                    title: "Register"
                }
            }
        },
    }
  }
</script>

- A. L

---

模板是什么？ - Bert

@Bert 啊，我找到了如何做到这一点的方法。https://vuejs.org/v2/guide/components.html#Dynamic-Components 我不知道为什么，但我似乎总是在发布问题后不久就找到答案。我会自己回答它。 - A. L

这就是我想知道的 :) 很高兴你找到了它。 - Bert

Answer 1

在Vue中，它被称为动态组件。请参考https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

从给定的问题中，您应该在模板中使用<component :is="modal.body"></component>。而不是分配一个对象，您需要将Vue实例内的components变量中的键（字符串）分配给它。例如：modal.body = "Login"

- A. L

---

“is” 不一定要是一个字符串。另外，使用渲染函数也是使用动态组件的一种替代方法。 - Bert

@Bert 哦，太棒了，你能更新我的答案（或者新建一个，我会标记它）。你似乎比我更了解这个。 - A. L