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は、空の文字列に置き換えられます。

テンプレートに「データ」オプションを正しく提供するために必要なことは何ですか？

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。