Prerender vue.js 2.0组件(类似于vue 1中的$编译)
Prerender vue.js 2.0组件(类似于vue 1中的$编译)
提问于 2017-03-26 22:05:13
我正在努力使可重用组件用于 栅格叠。
我无法从vue 1中找到一种类似于方法的简单方法。我见过这个示例。
这是我的vue脚本：
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)
}以下是相关的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>问题是：
当addGraph -不工作的时候，这个方法addWid工作得很好。即使在html中直接插入组件时，它也能工作。
，我猜是因为来自组件的html没有被预编译。不过，compile在vue1中解决了这个问题。
我已经尝试过的是：
Mount，正如建议的这里，但是它不能工作，因为它看不到定义的组件，我猜- 我已经看到了让它与
push一起工作的可能性，就像这里建议的那样。但是我的vue知识还没有那么强，我无法找到一种方法让它以这种方式工作，因为有几种类型的块，它们都应该作为相同的元素被网格堆栈处理。另外，同一部件可以在一个板内使用几次，参数不同。 - 我已经看到了一种编译
standalone component的方法，比如这里，但是看起来这是非常不推荐的，所以我正在寻找其他方法。 - 我也见过这些
render functions，但不幸的是，我的技能没有那么好地应用它。
因此，总结一下--我非常希望能就这些方法提供一些建议，或者建议另一种方法来实现这些方法。问题是，我也应该依赖于网格堆栈脚本，而不是简单地插入元素。
谢谢!
UPD: d-小部件的定义：
这基本上是一个组件，它在单独的文件中定义，称为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>回答 2
Stack Overflow用户
回答已采纳
发布于 2017-03-27 17:04:24
使用坐骑，您应该能够获得传递给grid.addWidget所需的内容。
首先，我们希望将组件转换为我们可以构造的组件。
const MyWidget = Vue.extend(DWidget);然后，我们可以挂载构造函数。
const mounted = new MyWidget().$mount();我不把任何东西传递给$mount()，它不会将组件添加到DOM中。我们可以访问它使用mounted.$el生成的元素。我希望您能够将其传递给addWidget。
grid.addWidget(mounted.$el, 0,0,1,1,true);Stack Overflow用户
发布于 2017-03-27 18:11:46
所以，正如@Bert所建议的那样，我不得不使用挂载。他的方法效果很好。下面是一个生成的addWid ()方法，它实际上是可重用的组件：
addWid () {
const MyWidget = Vue.extend(DWidget)
const mounted = new MyWidget().$mount()
var grid = $('#grid-stack').data('gridstack')
grid.addWidget(mounted.$el, 0, 0, 1, 1, true)
}希望它能对某人有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43035128
复制相关文章
相似问题
腾讯云开发者
