- 首页
- 前端开发
- Prerender vue.js 2.0 组件(类似于vue 1中的this.$compile)
Prerender vue.js 2.0 组件(类似于vue 1中的this.$compile)
[英] Prerender vue.js 2.0 component (similar to this.$compile in vue 1)
本文介绍了Prerender vue.js 2.0 组件(类似于vue 1中的this.$compile)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试为 gridstack 制作可重用组件.
我找不到一种简单的方法来执行类似于 vue 1 中的 this.$compile 方法的操作.我看过这个示例.
这是我的 vue 脚本:
出口默认{成分: {'horizontal-fab': HorizontalFab,'d-widget':DWidget},数据 () {返回 {}},挂载(){变量选项 = {单元格高度:80，垂直边距:10，宽度:3}$('#grid-stack').gridstack(options)},addWid(){var grid = $('#grid-stack').data('gridstack')grid.addWidget('<d-widget></d-widget>', 0, 0, 1, 1, true)},添加图(){var grid = $('#grid-stack').data('gridstack')grid.addWidget(`<div class="grid-stack-item" data-gs-width="4"><div class="grid-stack-item-content"><p>HTML(添加)</p>
`, 0, 0, 1, 1, 真)}
这里是相关的html:
<span @click="addGraph" >折线图</span></li><span @click="addWid">Sparklines</span></li>...<div id="grid-stack" class="grid-stack grid-stack-3"><d-widget data-gs-x="0" data-gs-y="0" data-gs-width="1" data-gs-height="1"></d-widget>
问题是:
那个方法 addGraph 工作得很好，当 addWid - 没有时.即使在 html 中直接作为组件插入时，它也可以工作.
我猜是因为组件中的 html 没有被预编译.不过在vue1中通过compile解决了.
我已经尝试过的:
Mount，按照此处的建议，但它没有工作，因为它看不到定义的组件，我猜- 我已经看到有可能使它与
push 一起使用，正如建议的 这里.但是我的 vue 知识还没有那么强，我找不到一种方法让它以这种方式工作，因为会有几种类型的块，并且所有这些块都应该被 gridstack 视为相同的元素.此外，同一组件可能会在一块板上多次使用，但参数不同. - 我看到有一种编译
独立组件的方法，比如这里，但看起来非常不推荐，所以我正在寻找其他方法. - 我还看到了这些
渲染函数，但同样 - 不幸的是，我的技能不太好应用它.
所以，总结一下 - 我真的很感激关于这些方法的一些建议，或者可能是关于实现这一点的其他方式的建议.问题是我还应该依靠 gridstack 脚本，而不是简单地插入元素.
谢谢！
UPD:d-widget 的定义:
这基本上是单个组件，在单独的文件中定义，称为 Widget.vue
<div class="grid-stack-item" data-gs-width="4"><div class="grid-stack-item-content"><p>小工具！(添加)
</模板><脚本>导出默认{数据 () {返回 {}}}
解决方案
使用 mount，你应该能够得到你需要传递给 grid.addWidget 的东西.
首先我们想把组件变成我们可以构造的东西.
const MyWidget = Vue.extend(DWidget);
然后，我们可以挂载那个构造函数.
const mount = new MyWidget().$mount();
我没有向 $mount() 传递任何东西，它不会将组件添加到 DOM.我们可以使用 mounted.$el 访问它生成的元素.我希望你应该能够将它传递给 addWidget.
grid.addWidget(mounted.$el, 0,0,1,1,true);
I'm trying to make reusable components for gridstack.
I cannot find a simple way to do something similar to this.$compile method from vue 1.
I've seen this example.
Here is my vue script:
export default {
components: {
'horizontal-fab': HorizontalFab,
'd-widget': DWidget
},
data () {
return {
}
},
mounted () {
var options = {
cellHeight: 80,
verticalMargin: 10,
width: 3
}
$('#grid-stack').gridstack(options)
},
addWid () {
var grid = $('#grid-stack').data('gridstack')
grid.addWidget('<d-widget></d-widget>', 0, 0, 1, 1, true)
},
addGraph () {
var grid = $('#grid-stack').data('gridstack')
grid.addWidget(`
<div class="grid-stack-item" data-gs-width="4">
<div class="grid-stack-item-content">
<p>HTML (added)</p>
</div>
</div>
`, 0, 0, 1, 1, true)
}
And here is relevant html:
<span @click="addGraph" >Line graph</span></li>
<span @click="addWid">Sparklines</span></li>
...
<div id="grid-stack" class="grid-stack grid-stack-3">
<d-widget data-gs-x="0" data-gs-y="0" data-gs-width="1" data-gs-height="1"></d-widget>
</div>
The problem is:
that method addGraph works perfectly, when addWid - does not. Even though when inserting as a component directly in the html, it works too.
I guess that it because html from the component is not being precompiled. It was solved by compile in vue1 though.
What I've already tried:
Mount, as suggested here, but it wasn't working because it couldn't see defined components, I guess- I've seen there are a possibilities to make it work with
push , as suggested here. But my vue knowledge is not that strong yet, and I cannot find a way to make it work in this way, since there would be several types of blocks, and all of them should be treated by gridstack as the same elements. Plus, same component may be used several times within one board, with different parameters.
- I've seen there is a method to compile a
standalone component, like here, but looks like it is highly unrecommended, so I'm looking for other ways.
- I've also seen these
render functions, but again - unfortunately my skills are not that good to apply it.
So, to sum it up - I'd really appreciate some advice about these methods, or maybe recommendations on the other way of implementing this. Problem is that I should also count on gridstack script, and not simply inserting the elements.
Thanks!
UPD: definition of d-widget:
This is basically single component, which is defined in the separate file, called Widget.vue
<template>
<div class="grid-stack-item" data-gs-width="4">
<div class="grid-stack-item-content">
<p>Wiiidget! (added)</p>
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
解决方案
Using mount, you should be able to get what you need to pass to grid.addWidget.
First we want to turn the component into something we can construct.
const MyWidget = Vue.extend(DWidget);
Then, we can mount that constructor.
const mounted = new MyWidget().$mount();
My passing nothing to $mount(), it will not add the component to the DOM. We can get access to the element it generated using mounted.$el. I expect you should be able to pass that to addWidget.
grid.addWidget(mounted.$el, 0,0,1,1,true);
这篇关于Prerender vue.js 2.0 组件(类似于vue 1中的this.$compile)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
