javascript - vuejs - 将组件保存到变量

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>

Answer 1

所以在 Vue 中它显然被称为动态组件 https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

根据给定的问题，您应该有 <component :is="modal.body"></component>在你的模板中。而不是分配对象，而是分配来自 components 的键(字符串) Vue 实例中的变量。例如。 modal.body = "Login"