使用 js 附加和渲染一个 Vue 组件答案

【问题标题】：Appending and render a Vue component using js使用 js 附加和渲染一个 Vue 组件
【发布时间】：2019-05-19 12:00:52
【问题描述】：

我有一个Vue 组件，它被导入到组件文件中。我想做的是，我想渲染一个使用 append 函数导入的组件。我该怎么做？

<template>
    <JqxGrid :width="width" :source="dataAdapter" :columns="gridValues"
             :pageable="true" :autoheight="true" :sortable="true"
             :altrows="true" :enabletooltip="true" :editable="true"
             :selectionmode="'multiplecellsadvanced'"  :showtoolbar="true" :rendertoolbar="rendertoolbar">
    </JqxGrid>
</template>

<script>

    import JqxGrid from "../jqx-vue/vue_jqxgrid.vue";
    import Button from "./buttonComponent.vue";

    methods: {
        rendertoolbar: function (toolbar) {
        // this is where I am trying to add the other component but it is not rendering as a actual component, it is just spitting out as it is.
            toolbar.append($("<span style='margin: 5px;'>  <jqx-button class='custom-erp-button custom-btn-secondary' :button-name="+`Add`+"></jqx-button>  </span>"));
        },
        cellsrenderer: function (row, columnsfield, value, defaulthtml, columnproperties, rowdata) {
            if (value < 20) {
                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
            }
            else {
                return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
            }
        }
    }
</script>

<style>
</style>

【问题讨论】：

这不是你使用 Vue 的方式。不要操纵 DOM。那是 Vue 的工作。
那我们应该怎么做呢？
附加一个带有id的span，然后创建一个新的Vue实例，其模板包含jqx-button，其el引用span id。

标签： javascript vue.js jqxwidgets

【解决方案1】：

我的第一反应是“你不应该直接操作 DOM 或构造 HTML 字符串”（否则你为什么使用 Vue？），但你使用的 JqxGrid 似乎以这种方式运行（我不是熟悉JqxGrid）。

在任何情况下，您要渲染的内容并不是严格意义上的 HTML，而是需要编译为 JavaScript 渲染函数的 Vue 模板字符串（请参阅 Vue.compile()）。即使你确实做到了，我也不确定它是否适用于 JqxGrid。

这是真正应该由 JqxGrid 使用scoped slots 完成的事情。如果 JqxGrid 不能支持像这样渲染 Vue 组件，那恐怕你倒霉了。

【讨论】：