前提・実現したいこと
Vueの単一ファイルコンポーネント(.vueという名前のファイル)で、データを検索した結果を表で表示するコンポーネントを作成しました(Gridコンポーネントとします)
コンポーネント自体は完成したのですが、使える形にできなくて苦戦しています。
コンポーネントに渡すデータは各画面で違うのでコンポーネントの外に検索処理を置きたいです。
↓こういうイメージです。
html
1<body> 2<div id="element"> 3 <button @click="search">検索</button> 4 <grid :list="list"></grid> 5</div> 6 : 7 : 8</body> 9<!-- ↓作ったコンポーネント --> 10<script type="text/javascript" src="(パス)/grid.js" ></script> 11<script> 12new Vue({ 13 el:'#element', 14 components:{ 15 Grid 16 }, 17 data(){ 18 return { 19 list:[], 20 } 21 }, 22 methods:{ 23 search(){ 24 // サーバーの検索処理を呼出す実装 25 this.list = 検索結果 26 }, 27 } 28}); 29</script>
以前は単一ファイルコンポーネントではなく、jsファイルに全部コンポーネントを書いていました。
この場合は上記のように読み込んで使えていました。
javascript
1// jsファイルに全部書くバージョンのコンポーネント 2var Grid = { 3 template: "<div> ・・・・", 4 props: { list:Object,} 5 : 6 : 7}
単一コンポーネントのビルド結果をこういう風な形にできればいいと思うのですが、その場合のエントリーポイントの書き方がわかりません。
ネットで調べてみても後述のような書き方ばかり出てくるのですが、そもそも私が目指しているようなことは不可能なのでしょうか?
ご存知の方がいらっしゃいましたら助けてください!
現在のソースコード
■エントリーポイントのjsファイル
javascript
1import Vue from 'vue'; 2import Vuex from 'vuex'; 3import store from './js/store' 4import Grid from './js/components/Grid'; 5 6new Vue({ 7 el: '#grid', 8 store, 9 components:{ 10 Grid 11 }, 12});
■使用する側
html
1<body> 2 <div id="grid"> 3 <grid></grid> 4 </div> 5</body> 6<!-- ↓作ったコンポーネント --> 7<script type="text/javascript" src="(パス)/grid.js" ></script>
表は表示されて必要な機能は動いているのですが、gridコンポーネントにデータを渡そうにも既にnew Vue()
がエントリーポイントの中にいるので、どうやって<grid></grid>
にデータを渡せばいいのかわからない状態です…。
試していること
今はエントリーポイントのjsの中に検索処理を書く方法を取っています。
このコンポーネントを使用したい画面が今のところ16画面あり、今後も増える予定です。
16個エントリーポイント作って、「本当にこんなことするんだろうか・・・」と不安になってきました…。
config
1const path = require('path'); 2const { VueLoaderPlugin } = require("vue-loader"); 3const setPath = function(folderName) { 4 return path.join(__dirname, folderName); 5} 6module.exports = { 7 mode: 'production', 8 devtool: 'source-map', 9 entry: { 10 // ↓画面それぞれの検索処理を呼出したエントリーポイント 11 "screen1" : "./src/screen1.js", 12 "screen2" : "./src/screen2.js", 13 "screen3" : "./src/screen3.js", 14 "screen4" : "./src/screen4.js", 15 "screen5" : "./src/screen5.js", 16 "screen6" : "./src/screen6.js", 17 "screen7" : "./src/screen7.js", 18 : 19 : 20 }, 21 output: { 22 path: setPath('/dist'), 23 filename: "[name].js", 24 }, 25 : 26 :
補足情報(FW/ツールのバージョンなど)
vue: 2.5.17
webpack:4.25.1
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。