jsモジュールからvueに小道具を渡すことは可能ですか？
小道具は私にとってコンポーネント間でうまく通過していますが、実際のVueアプリ自体からではありません：
import Vue from 'vue'
import App from './App.vue'
var myVue = new Vue({ export to other files
el: '#entry',
components: {App},
render: h => h(App),
data: function(){
return{
testSuccess:'this test was successful!'
}
},
})
window.myVue = myVue // we use window.myVue becayse if we can export to window, we can export to other js modules.
<template>
<div ref="app">
{{ testSuccess ? testSuccess : 'prop not imported!' }}
</div>
</template>
<script>
export default = {
name: "app",
props: ["testSuccess"]
}
</script>
<div id="entry" >
<app :testSuccess="testSuccess"></app>
</div>
<script src="/dist/build.js"></script>
私は何が欠けていますか？
コンポーネントを使用してこれを行う方法を理解しています。
Vueモジュールを他のjsモジュールにエクスポートして、意味のある情報を渡すことができるようにしたいと思います。
これは、renderルートVueインスタンスの関数です。
render: h => h(App)
に小道具を渡していないhので、App小道具なしで作成されます。
#entry明示的なrender関数を提供しているため、内部のテンプレートは無視されます。
だからどちらか：
renderルートVueインスタンスから関数を削除します。ほとんどの例でrender関数を使用する理由は、テンプレートをコンパイルできない実行時のみのVueビルドを使用できるようにするためです。#entry、小道具を関数App内に渡しrenderます。後者は次のようになります。
render (h) {
return h(App, { props: { testSuccess: this.testSuccess } })
}
にアクセスする必要があるため、矢印関数を使用できないことに注意してくださいthis。
小道具を正しく渡すと、myVue.testSuccess = '...'問題なく値を更新できるようになります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加