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://vuejs.org/v2/guide/components.html#Dynamic-Components

根据给定的问题，您的模板中应该有<component :is="modal.body"></component>。而不是分配对象，您可以从Vue实例内的components变量中分配键（字符串）。例如。 modal.body = "Login"

vuejs - 将组件保存到变量

1 个答案: