単純なカウントするアプリを想像してください。
親:Counter
子:Button
CounterからButtonへはv-bingとpropsで現在のCount値を渡しています。
Buttonでは、押された時にその値をバックエンドに投げる(Post)ことを想定しています。
使えるAPIのメソッドは複数あります(という想定です)。
Button.vue内でmapActionsで展開してどこに投げるか(どのAPIのメソッドを使うか)指定すれば良いのかもしれませんが、それではButtonコンポーネントの再利用性が下がってしまいます。
なのでそれを回避するためにも、なるべく親で投げる先を決めてから子に投げさせたいです。
これを実現することは可能でしょうか?
もしくは、親が投げれば良いのではないかとも考えております。そうなるとButtonコンポーネントがクリックされたという情報が必要になります。
親が子→親のアクセスなしにそれを検知することは可能なのでしょうか?
また、別のアプローチで解決すべきなのでしょうか?
APIの仕様を改善すればactionを渡さずとも再利用性が保てる、等。
イマイチ再利用性という面で恩恵がないなと感じております。曖昧な質問かもしれませんが宜しくお願いします。
vue
1<template> 2 <!-- 省略 --> 3 <SubmitButton :input="input"></SubmitButton> 4</template> 5 6<script> 7 8import SubmitButton from "@components/parts/buttons/SubmitButton" 9 10export default { 11 name: "Editor" 12 data () { 13 return { 14 input: "" 15 } 16 } 17} 18 19</script> 20
vue
1<template> 2 <div id="submit" v-on:click="incriment">Submit</div> # 例えばincrimentの他にdecriment等があり、親でそれを指定したい 3</template> 4 5<script> 6 import axios from "axios" 7 8 export default { 9 name: 'SubmitButton', 10 props: ['input'], 11 methods: { 12 incliment(e) { 13 let _this = this; 14 15 axios.post("http://localhost:3000/counts", 16 { 17 count: { 18 count: this.input 19 } 20 } 21 ).then(function(res) { 22 _this.$router.push({ path: "/"}) 23 }) 24 e.preventDefault(); 25 } 26 } 27 } 28</script> 29
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。