使用 Vueify 渲染函数时在模板中绑定 Vue 数据属性值

Question

我是 Vue 新手，我对绑定到 Vueify 模板中占位符的 data 属性中的值有疑问。我敢肯定这是一个简单的缺乏理解，但任何帮助将不胜感激。

我正在使用 Browserify 运行我的 .vue 文件上的 Vueify 转换。

这是我当前的设置：

    new Vue({
        el: '#clip-slides',
        render : function(createElement){
            var template = require('./clips.vue');
            return createElement(template);
        },
        data : {
            'testValue' : 'I am a test value!'
        }
    });

<template>
    <div>
        {{testValue}}
    </div>
</template>

模板中的占位符 testValue 被替换为空字符串。

我需要做什么才能正确地为我的模板提供 "data" 选项？

Answer 1

将其作为属性传递。

Clips.vue

<template>
    <div>
      {{testValue}}
    </div>
</template>

<<script>
export default {
  props: ['testValue']
}
</script>

main.js

new Vue({
  el: '#app',
  render(h){
    let template = require("./Clips.vue")
    return h(template, {props:{testValue: this.testValue}})
  },
  data:{
    testValue: "hello world!"
  }
})

工作example。

使用 Vueify 渲染函数时在模板中绑定 Vue 数据属性值

Binding Vue data attribute values in template when using Vueify render function

javascript

browserify

vue.js

vuejs2