vuexのメモ - diadia

コンポーネント間のデータの受け渡しについて。

コンポーネント間のデータの受け渡しの方法はいくつか方法があることがわかった。
props, emitを使った方法。 vuexを使った方法。

vuexを使った方法を考える。

vuex にはgetterってのが存在している。これはなにか？？？ vue.jsの算出プロパティに当たるもの。
https://vuex.vuejs.org/ja/guide/getters.html

親から子に値を受け渡すprops

親ではテンプレートに属性を書く。この時ケバブケースで書くことになる。

oya.vue

<template>
<div>
<s-template s-num='number'></s-template>
</div>
</template>

<script>
import Stemplate from '.STemplate.vue'
export default{
    data: {
        number: 14
    },
    comonents : {'s-template': STemplate}
}
</script>

STemplate.vue

<template>
<div >
{{ s-num *4 }}
</div>
</template>
<script>
export default{
    props: ["s-num"]
}
</script>

今更だけれどもコンポーネントにはelは必要ない事がわかった。

子から親にデータを渡すemit

oya.vue

<template>
<div>
<p v-on:emit_event_name='number = $event'></p>
<s-template s-num='number'></s-template>
</div>
</template>

<script>
import Stemplate from '.STemplate.vue'
export default{
    data: {
        number: 14
    },
    comonents : {'s-template': STemplate}
}
</script>

STemplate.vue

<template>
<div >
<p>s-template</p>
</div>
</template>

<script>
export default{
    data: {
        number: 5
    }
    methods: {
        send_data(){
            this.$emit('emit_event_name', number * 4)
        }
    }
}
</script>

コンポーネント間のデータやり取り

まずコンポーネントにはマウントするってことがないので、elやmountメソッドを使わない。そのようなコンポーネント間のデータのやり取りにおいて共通点があったのでイメージしやすい形としてメモしておく。 #####構造データを送信する側とデータを受け取る側にコードを書く。親コンポーネントから子コンポーネントにデータを渡す場合には、親ではtemplateタグ内の送り先子コンポーネントタグの属性に送るデータの名前と属性値にデータを書く。
子ではpropsに親で定めたデータの名前を加えておく。

子コンポーネントから親コンポーネントにデータを渡す場合には、親ではtemplateタグ内のデータ受取先である子コンポーネントタグの属性としてv-onを使い、その引数にイベント名を書く。そして属性値に$eventを書くが、この値が子から送られたデータである。子では、methods等の関数内にthis.$emit()を書く。emit内には第1引数にイベント名を書き、第2引数に送りたいデータを書く。

つまり親ではtemplateタグ内の子コンポーネントタグをいじるだけでいいし、子ではscriptタグ内のpropsかmethods内の関数内でthis.$emit()を使うという形式でデータ交換ができるとイメージすればよい。