コロナで世の中大変ですね。通勤電車は人が少なくて、それだけはチョットいい感じです。。
早く落ち着いてほしいなぁ・・・
業務でnuxtやってますが、component間でデータを渡して変更したりするのにハマりました😇
答えとしては、propsを使って子コンポーネントに値を渡してあげればOKでした。
子で値を変更した場合も、親で渡した変数を参照すると変わっていました。
サンプル
サンプルコードを書いてみました。
親画面
<template>
<v-row>
<v-col cols="12">
<h2>component test</h2>
</v-col>
<v-col cols="12">
<Modal ref="testModal" :parentData="parentData"></Modal>
</v-col>
<v-col cols="12">
<v-btn @click="showComponentData()">コンポーネントで入力したデータ</v-btn>
</v-col>
</v-row>
</template>
<script>
import Modal from '../components/Modal'
export default {
components: {
Modal,
},
data() {
return {
parentData: {}
}
},
mounted (){
this.parentData.testString = 'テスト引数文字列🐬';
this.parentData.test2String = 'テスト引数二つ目🐬';
this.parentData.test3String = '';
},
methods: {
showComponentData() {
alert(this.parentData.test3String);
}
}
}
</script>
子コンポーネント
Modal.vueの名前で、componentsフォルダに配置しています。
<template lang="pug">
div
div
span ダイアログコンポーネント呼び出し元
div
v-dialog(v-model="dialog")
v-card
v-card-title ダイアログのタイトル！😃
v-card-text
div ダイアログ表示テスト
div 親から渡したデータ1:[{{parentData.testString}}]
div 親から渡したデータ2:[{{parentData.test2String}}]
v-card-actions
v-btn(color="primary" @click="dialog = false;") はい
v-btn(color="green white--text" @click="dialog = false;") いいえ
div.mb-2
v-btn(color="primary" @click="showModal()") モーダル表示
div
v-text-field(v-model="addText" label="input text")
v-btn(color="primary" @click="setParentData()") 親のデータ変更(*parentData.text3String)
</template>
<script>
export default {
props: {
parentData: Object
},
data() {
return {
dialog: false,
addText: '',
}
},
methods: {
showModal() {
this.$data.dialog = true;
},
setParentData() {
this.parentData.test3String = this.addText;
}
}
}
</script>
やっていること
親画面
親画面では、modalコンポーネントをimportして、下記のタグで展開しています。
<Modal ref="testModal" :parentData="parentData"></Modal>
:parentDataをつけることで、コンポーネント内のデータにアクセスできます。(名前はなんでも大丈夫です😙）
この書き方 v-bind:parentData と同じで、v-bindを省略して書いています。
mountedメソッドで画面ロード時にコンポーネントに渡すデータを作っています。
渡すデータをコンポーネントにbindしておけば、いつ変更しても大丈夫そうです。
子コンポーネント
最初の下記の記述で、parentDataを受け取っています。
受け取った後は、this.parentDataみたいにthisを使ってアクセスしたり、内容を変更したりできます。
export default {
props: {
parentData: Object
},
下記の箇所で、親から貰ったデータを表示するようにしています。
div 親から渡したデータ1:[{{parentData.testString}}]
div 親から渡したデータ2:[{{parentData.test2String}}]
親のデータ変更ボタンを押した時にsetParentDataメソッドで、入力されたテキストをparentData.test3Stringに格納しています。
typescriptを使っている場合
今回サンプルではtypescriptを使っていませんが、typeを使っている場合は
@Propデコレータを使って受け取る必要がありました。。type独特の書き方でハマってしまった…
今回の例で言えば下記のようになると思います。（詳細はリンク先参照）
@Prop({ default: '' })
parentData: object;
github
コメント