在运行时编译作为prop收到的Vuetify标签/模板 [英] Compile Vuetify tags/template received as prop in runtime
问题描述
我想向组件发送一个模板"道具,然后进行渲染.如果我发送纯HTML可以正常工作,但是如果我发送Vuetify标记(例如< v-btn> test</v-btn>
),则不会编译模板.
I want to send a 'template' prop to a component then render it. If I send a plain HTML it works, but if I send a Vuetify tag like <v-btn>test</v-btn>
the template does not get compiled.
我知道我不应该通过道具传递模板,但这是一个特定的情况:父组件充当模板构建器",并且子组件充当结果查看器",因此我必须将创建的模板传递给子组件,以便它可以编译并显示它.
I know i shouldn't pass a template via props, but this is a specific case: The parent component works as a "template builder" and the child components works as the "result viewer", so I have to pass the created template to the child so that it can compile and show it.
这就是我一直在尝试的东西:
Here's what I've been trying:
main.js
import Vue from 'vue'
import App from './App.vue'
// Some imports here ...
import vuetify from './plugins/vuetify';
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
App.vue
<script>
import Vue from 'vue'
// eslint-disable-next-line
var staticRenderFns = [];
var dynamic = {
props: ['template'],
data: () => ({
templateRender: null,
}),
render(h) {
if (!this.templateRender) {
return h('div', 'loading...');
} else { // If there is a template, I'll show it
return this.templateRender();
}
},
watch: {
// Every time the template prop changes, I recompile it to update the DOM
template:{
immediate: true, // makes the watcher fire on first render, too.
handler() {
var res = Vue.compile(this.template);
this.templateRender = res.render;
// staticRenderFns belong into $options,
// appearantly
this.$options.staticRenderFns = []
// clean the cache of static elements
// this is a cache with the results from the staticRenderFns
this._staticTrees = []
// Fill it with the new staticRenderFns
for (var i in res.staticRenderFns) {
//staticRenderFns.push(res.staticRenderFns[i]);
this.$options.staticRenderFns.push(res.staticRenderFns[i])
}
}
}
},
}
export default {
name: 'App',
data: () => ({
template:`
<v-row>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
</v-row>
`,
}),
components:{
dynamic,
},
};
</script>
<template>
<v-app id="app" style="padding-top: 64px;">
<v-app-bar
app
color="blue"
>
<v-btn depressed color="white" class="black--text" click="addBtn">Button</v-btn>
</v-app-bar>
<dynamic :template='template'></dynamic>
</v-app>
</template>
推荐答案
在动态组件内部尝试使用传递的模板来渲染vue组件:
Inside the dynamic component try to render a vue component using the passed template :
var dynamic = {
props: ['template'],
data: () => ({
templateRender: null,
}),
render(h) {
if (!this.template) {
return h('div', 'loading...');
} else { // If there is a template, I'll show it
return h(Vue.component('dynamic-render', {template:this.template}));
}
},
}
完整示例
var dynamic = {
props: ['template'],
data: () => ({
templateRender: null,
}),
render(h) {
if (!this.template) {
return h('div', 'loading...');
} else { // If there is a template, I'll show it
return h(Vue.component('dynamic-render', {
template: this.template
}));
}
},
}
var app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
count: 1,
template: `
<v-row>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
<v-col>
<v-btn class="pa-2 primary white--text">Test</v-btn>
</v-col>
</v-row>
`,
}),
components: {
dynamic,
},
methods: {
changeContent() {
this.count = this.count + 1
this.template = '';
setTimeout(() => { //simulate loading status
this.template = `<v-col>
<v-btn class="pa-2 primary white--text">Btn ${this.count}</v-btn>
</v-col>`
}, 2000);
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-btn depressed color="primary" class="black--text" @click="changeContent">change content</v-btn>
<dynamic :template='template'></dynamic>
</v-app>
</div>
这篇关于在运行时编译作为prop收到的Vuetify标签/模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!