Vue.jsでランタイムオンリービルドのコンポーネントにVueifyを使用

Question

私は、Vueifyを使用してvue 1.0からVue 2.0へのvue.jsコンポーネントの移植に取り組んできました。 Starter resourcesの場合、

vue-loaderまたはvueifyを使用して* .vueファイルをインポートすると、その部分が自動的にレンダリング機能にコンパイルされます。したがって、* .vueファイルでランタイム専用ビルドを使用することをお勧めします。

しかし、これは当てはまりません。

<template> 
    <div> 
     {{ msg }} 
    </div> 
</template> 

<script type="text/javascript"> 
export default { 
    props: { 
     msg: { 
      default: "Child Message" 
     } 
    } 
} 
</script> 

そして、私は私のmain.jsファイルに：私のような単純なコンポーネントがある場合は

私が行うことはできません

browserify('./main.js') 
    .transform(vueify) 
    .bundle() 
    .pipe(fs.createWriteStream("bundle.js")) 

を：

import Vue from 'vue' 
import MyComponent from './my-component.vue'; 

Vue.component('my-component', MyComponent); 

new Vue({ 
    el: '#app', 
    render: function(createElement) { 
     return createElement(MyComponent) 
    } 
}); 

を次に使用してがぶ飲みしてコンパイルしますコンポーネントをレンダリングする以外は何もしません。

<div id="app"> 
    <!-- my-component renders even though I didn't ask it to --> 
</div> 

とコンポーネントに追加された小道具を受信して​​いないので、：それは、ID「アプリ」とdiv要素を見つけると実際には、それは実際には、すぐにコンポーネントをレンダリングします

<div id="app"> 
     <!-- 
     Message displays as default "Child Message" rather than "Parent Message". The prop wasn't passed 
     --> 
     <my-component msg="Parent Message"></my-component> 
    </div> 

HTMLで

import Vue from 'vue' 
import MyComponent from './my-component.vue'; 

Vue.component('my-component', MyComponent); 

new Vue({ 
    el: '#app', 
    render: function(createElement) { 
     return createElement(MyComponent) 
    }, 
    data() { 
     return { 
      msg: "Parent Message" 
     } 
    } 
}); 

：

私は main.jsに dataを追加する場合は同様に、それはWebページからアクセス可能ではありません「#app」内部

<div id="app"> 
    {{ msg }} // This will not print 
</div> 

、何が（「私の成分を」覚えている私はそれを追加しない場合でも、レンダリングされた）すべてでレンダリングされません。

<div id="app"> 
    <!-- This doesn't render--> 
    <strong>A component </strong> 
    <my-component></my-component> 
</div> 

だから、のように私には見えますコンポーネントを制御することなくコンポーネントをレンダリングすることができます。また、ビューモデルでは何もできないので、実際にはランタイムのみのビルドを推奨する必要がありますか？

は最後に、私は aliasifyを使用してスタンドアロンビルドを使用してきましたし、すべてが正常に動作しますが、私は実際にそれが実行時のビルドで vueifyを使用しているとき、私は行方不明ですが何であるかを知っているように思います。確かに、私が描いている振る舞いは、起こるはずのものではないので、私はどこかで何か誤解していると思います。問題いくつかのテストを行う

Answer 1

は、機能をレンダリング、あなたのデフォルトである：

render: function(createElement) { 
    return createElement(MyComponent) 
} 

メインVueの機能をレンダリングし、体内に挿入ベースMyComponentの作成のファイル上書きしています。

レンダリング機能を削除したとき、プロットが起動しました。

jsFiddleレンダリング機能のコメントを外して、どういう意味かを確認してください。

レンダリング機能は、htmlテンプレートを置き換えることを目的としています。これにより、より多くの制御と他のテンプレートオプションの使用が可能になります。