Vueを使ってデータの一覧を表示するページを作っています。以下のことをしたいのですが、どうすればよろしいでしょうか。
- 1.Vueの外から初期値を渡したい
- 2.Vueの外から、Vueコンポーネント内のメソッドを叩きたい。メソッドを直接指定するか、emitする方法かどちらかで。
- 3.Vueの中で発生したイベントを、Vueの外に投げたい。
これはしたくない というポイントは以下の通りです
- 1.以下のindex.htmlは書き換えたくない
- 2.特に、
<div id="app"></div>
の部分。htmlファイルは、中身が空で決まったidのエレメントを置くだけで、エレメントの中にデータ定義を書いて…という事はしたくないです。
今の自分のコードは以下のような構造です。
index.html
html
1<div id="app"></div> 2<script> 3// サーバが側からデータが出力される。サーバ側はこんな感じ 4// const serverSideData = <?php print(json_encode($data)); ?>; 5const serverSideData = [{id:1,data:xxxx},{id:2,data:yyyy}]; 6</script> 7<script type="text/javascript" src="/index.js"></script></body>
index.ts
ts
1import Vue from 'vue' 2import App from './App.vue' 3const vue = new Vue({ 4 render: h => h(App), 5 el:"#app", 6});
App.vue
vue
1<template> 2 <div id="app"><span>「{{serverSideData}}」</span></div> 3</template> 4<script lang="ts"> 5import Vue from "vue"; 6export default Vue.extend({ 7 name: "app", 8 data: () => ({}), 9 mounted: function() {}, 10 methods: { 11 test_func: function() {}, 12 }, 13}); 14</script> 15<style lang="scss" scoped> 16//略 17</style> 18
こう書きたい
上記の中のindex.ts の中で、データを指定したりイベントを定義したいです。イメージとしてはこんな感じ
ts
1import Vue from 'vue' 2import App from './App.vue' 3const vue = new Vue({ 4 render: h => h(App), 5 el:"#app", 6 data:{serverSideData}//ここでサーバからのデータをVueコンポーネントに渡して、App.vueの中で使いたい 7}); 8vue.$emit("add-new-data",xxxxx);// Vueの外から、App.vueの中のメソッドを叩きたい 9vue.$on("data-registerd",()=>{alert("データが登録できました")});//逆に、Vueの中で発生したイベントをVueの外でキャッチしたい
最後のindex.tsのような書き方を実現する為に、App.vueファイルの中をどう書き換えればよいでしょうか。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。