Question

我尝试使用道具和PropsData，但它不起作用：/

import Vue from 'vue'
import Hello from '@/components/Hello.vue'

export function createComponent(selector, params) {
  const test = {name: 'Test'};

  new Vue({
    el: selector,
    render: app => app(selector, {
      propsData: test
    })
  })
}

我无法找到为什么即使使用某些console.log也无法实现这一点，我对VueJS并不是很有信心所以有办法做到这一点吗？

编辑：

经过一些测试，道具被我写的正确传递，似乎我没有正确地将组件名称传递给Vue实例：

以下是我的代码如何工作（或者我希望它至少如何工作......）：

随机php文件：

<?php
$selector = "Hello";
$data = json_encode(['name' => 'from PHP'])
?>
<div id="<?= $selector; ?>-component"></div>
<script>
  createComponent(<?= $selector; ?>, <?php return $data; ?>) // I tried "$selector" format, but doesn't work either.
</script>

我的主要js文件

import Vue from 'vue'
import Hello from '@/components/Hello'

export function createComponent(selector, params) {
  new Vue({
    el: '#' + selector + '-component',
    render: app => app(selector, { // If I replace selector by Hello, it works, but that's not what I want.
      props: params
    })
  })
}

在这个文件中，我尝试了一些技巧来调用＆＃39;选择器＆＃39;但控制台告诉我：ReferenceError: Hello is not defined

但正如我们所见，Hello明确地定义在文件的顶部。

我的单个文件vue组件：

<template>
    <h1>
        Hello {{ name }}!!
    </h1>
</template>

<script>
  module.exports = {
    props: {
      name: {
        type: String,
        default: 'World'
      }
    }
  }
</script>

我简化了我的PHP代码以向您展示案例，因此可能存在一些错误，我还没有尝试过。

错误必须来自语法，否则我就错了。

PS：我讨厌JS语法：）

Answer 1

import Vue from 'vue'

export function createComponent(selector, propsData) {

  let instance = new Vue({
    el: document.createElement('div'),
    render(createElement) {
     return createElement(
      'h' + this.level,   // tag name
      this.$slots.default // array of children
     )
    },
    propsData
  })

  document.body.querySelector(selector).appendChild(instance.$el);
}

假设您想要动态创建VueJS实例并将其附加到dom。还需要从渲染函数中移出的propsData对象。渲染函数是可选的，您始终可以使用模板字符串...

将对象传递给View实例中的道具＆gt;从外部变量动态加载组件

编辑：

随机php文件：

我的主要js文件

我的单个文件vue组件：

1 个答案: