使用 props 数据实例化扩展的 VueJS 组件

Posted 2023-02-23

【中文标题】使用 props 数据实例化扩展的 VueJS 组件

【英文标题】：Instanciating extended VueJS components with props data within

【发布时间】：2021-06-15 14:27:46

【问题描述】：

大家好，

让我给你一些关于我的问题的背景：

我正在尝试创建一个系统，只需按一下按钮即可在页面上添加图表。 这些图表将包含来自 mysql 数据库的元素。

我有一个 Chart.vue 文件，其中包含单个 HighChart 元素的模板。它还包含一个道具：

export default 
    name : "Chart",
    props : ["tableToDisplay"],
    

然后我有一个名为“Test.vue”的主 vue。 它从组件文件夹中导入 Chart.vue，然后我基本上只需要编写：

<Chart :table-to-display="tableToDisplay"/>

创建包含在变量中的表的图表实例：this.tableToDisplay。

但这不是我想要做的：我想通过按下按钮来创建一个图表，所以我做了一些更改：

<div>
    <button @click="createGraph">Add a graph</button>
    <Chart :table-to-display="tableToDisplay"/>
</div>

有了它，我创建了方法：

        createGraph(event)
        
            let ChartClass = Vue.extend(Chart)
            console.log(ChartClass)
            let graphInstance = new ChartClass(
                props:
                    "tableToDisplay": this.tableToDisplay
                
            )
            graphInstance.$mount()

            let divContainer = event.target.parentElement

            divContainer.append(graphInstance.$el)
        ,

这就是我的问题所在。

在该方法中，我想发送一个表格以显示到新创建的图表，但我似乎无法以这种方式操作道具值。

我认为这段代码是解决方案：

           let graphInstance = new ChartClass(
                props:
                    "tableToDisplay": this.tableToDisplay
                
            )

但事实证明并非如此。

当我点击按钮时，会出现一个空图表，但道具“tableToDisplay”未定义。

我查看了控制台，我得到一个“[Vue 警告]：挂载钩子中的错误：“TypeError：密文为空”。 我是否在 ChartClass 中放置参数都没有关系，我总是在 graphInstance.$mount() 行出现此错误。

【参考方案1】：

首先，我认为您不需要以编程方式实例化图表组件。一个简单的v-for 循环就可以解决问题：

<template>
  <Chart v-for="table of chartTables :table-to-display="table"/>
</template>

<script>
...
data() 
   chartTables: []
,
methods: 
   createChart() 
      // Adding a new table to the array will create a new Chart component.
      this.chartTables.push(this.tableToDisplay)
   

</script>

如果此解决方案适合您的需求，请继续这样做！

---

也就是说，如果你真的需要自己实例化一个 Vue 组件，你必须使用 propsData 参数来传递你的 props。

    const instance = new ChartClass(
      parent: this, // The parent is your current component
      propsData: 
        tableToDisplay: this.tableToDisplay,
      ,
    )
    let divContainer = event.target.parentElement 
    instance.$mount(divContainer)

parent 选项非常重要：它将您的组件添加到 Vue 组件依赖关系树中。没有它，您的组件将不会继承属性（例如 Vuex 商店、插件等）。

【讨论】：

我真的很想实例化一个 Vue，所以我选择了第二个选项，它成功了！非常感谢！