0

我尝试根据描述动态渲染组件。
从

{component: 'customComponent', props: {value: "val1"}, ...}

我会渲染

<custom-component :value="val1" @input="v=>val1=v" />`

我的目标是为任意事件和动态道具做到这一点。
我不知道如何传递动态道具来渲染。

部分解决方案：

val1基于（https://symfonycasts.com/screencast/vue/vue-instance）的有效但每次更改都会重新渲染的解决方案是

render: function(h){
    const template = "...building up the html here..."
    return Vue.compile(template).render.call(this, h);
}

我尝试使用 VueJS 文档

我在有关渲染的文档中找不到如何传递动态变量。

在最小的实现中你可以看到我已经走了多远，如果你能帮我完成它，那就太棒了！

到目前为止的最小实施

我希望看到 'hello' 而不是 'values.value1' 并且 values.value1 应该在我更改文本框中的文本后更新。

演示.html：

<!DOCTYPE html>
<html>
<body>
  <div id="q-app">
    The text input should say 'hello' instead of 'values.value1'
    <custom-component :descriptor="mainComponent"></custom-component>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/quasar@1.15.15/dist/quasar.umd.min.js"></script>
  <script>
Vue.component('custom-component', {
    props: ['descriptor'],
    render: function (createElement) {
        const attributes = {
            on: this.descriptor.events,
            props: this.descriptor.props
        }
        return createElement(
            this.descriptor.component,
            attributes)
    }
})
const app = new Vue({
    el: '#q-app',
    data: function(){
    return {
        mainComponent: {
           component: 'q-input',
           props: {
               value: 'values.value1'
           },
           events: {
               input: value => this.values.value1 = value
           }
        },
        values: {
            value1: 'hello'
        }
    }
  }
})
  </script>
</body>
4

0 回答 0