vuejs - 节能组件变量

问题描述：

所以我来自一个阵营的背景，我想知道我怎么会模仿这一行：var modal = <Login/>vuejs - 节能组件变量

这里是我到目前为止，但该变量的输出是一个字符串，而不是：

<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>

什么是模板？ – Bert

@Bert啊我发现如何做到这一点。 https://vuejs.org/v2/guide/components.html#Dynamic-Components我不知道为什么，但我总是在发布问题后很快找到答案。我会自己回答。 –

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

答

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

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

['is'不一定是一个字符串]（https://vuejs.org/v2/api/#component）。另外，使用动态组件的替代方法是使用渲染功能。 – Bert

@Bert很酷，你能不能更新我的答案（或者做一个新的，我会标记它）。你似乎比我更懂这方面的知识。 –

vuejs - 节能组件变量

相关推荐