Vue.js 親子孫コンポーネント間での変数の受け渡しや関数の呼び出し

全部ばらばらにメモしてたけど、探すの面倒くさくなってきたからここにまとめて書く。
また他のパターンもあればこの記事にどんどん追加する予定。

親コンポーネントから子コンポーネントに変数を渡す方法

propsを使う。

//Oya.vue
<Ko :hoge="fuga"/>

//中略
data() {
  return {
        fuga:null,
},

mounted:{
    this.fuga='子に渡したい文字列など'
}

Oya.vue内の変数fugaを、

子コンポーネント内で変数hogeとして使えるように渡す。

別にに同じ変数名にしても問題はない。

//Ko.vue
{{hoge}}

//中略

export default {
        props:{
            hoge:{
                type:String,
            }
        },
}

html部分に{{hoge}}
とかけば、親から受け取った「子に渡したい文字列など」という文字列を表示できる。

props:{ } 内でtypeを指定している。

指定できるtypeは公式を参照。

プロパティ - Vue.js

親コンポーネントから子コンポーネント内のメソッドを実行したい但し、子コンポーネントにmounted内などにthis.hogeと書いても使えない。

スクリプトとして使いたければ、createdに書けばいい。

この記事とかが参考になるかも？

vue.js component間のデータの受け渡し - Qiita

親コンポーネントから受け取った値で子コンポーネントの変数を上書きしようとしたらエラーになる場合

親コンポーネントから受け取ったオブジェクトで子コンポーネントに存在する既存のオブジェクトを上書きしたいが、値がnullのキーがあるとエラーが出る

[Vue warn]: Error in nextTick: "TypeError: Cannot read properties of null (reading 'replace')”

親コンポーネントから送られてきたオブジェクトで、

子コンポーネントのオブジェクトを上書きしようとすると上記のようなエラーになることがある。

動くっちゃ動くけど。

• 子に元々存在するthis.beforeというオブジェクトを
• 親から受け取ったafterという変数で上書き
• さらにオブジェクトthis.before内に値がnullのキーが存在するなら、その値をすべて””に変換する

this.value = Object.fromEntries(
    Object.entries(inquiry).map(([k, v]) => [k, v === null ? "" : v])
); //投稿済み記事を参照する処理する場合は変数を上書き

子コンポーネントから親コンポーネントに変数を渡す

emitを使う。

子に定義された変数を、親で使いたい場合。

//Ko.vue
<script>
export default {
    name: 'RecordForm',
        data() {
            return {
                result: false,
            }
        },
mounted() {
    this.$emit('parentMethod', this.result)
},
</script>

今回は変数resultを親に渡す。ゆえにfalseという値が親で受け取れれば成功。

//Oya.vue

//html部分
<RecordForm @parentMethod="judge"></RecordForm>
<p>{{ result }}</p>

//script部分
import RecordForm from '../Ko' //Ko.vueのパス
export default {
    components: {
        RecordForm,
    },
    data() {
        return {
            result: '',
        }
    },
    methods: {
        judge(result) {
            this.result = result
        }
    }
}

@parentMethodというハンドル（コンポーネントが読み込まれたら自動的に発動）で、

judge()メソッドを発動するぜ

judege()メソッドは変数resultを引数として使うぜ

親コンポーネント内の変数this.resultを、子コンポーネントから受け取ったresult

で上書きするぜ

すなわち親コンポーネントのthis.resultの値は、falseになるぜ

子コンポーネント内の関数を親コンポーネントから呼び出したい

//親コンポーネント
  <template>
      <div id="app">
          <button @click="callChildMethod">Change Message</button>
          <Ko ref="child"/>
      </div>
  </template>

  <script>
  import HelloWorld from './components/HelloWorld'

  export default {
      name: 'Oya',
      methods: {
          callChildMethod(){
              //子コンポーネントのメソッドを呼ぶ
              this.$refs.child.hello();
          }
      },
      components: {
          HelloWorld
      }
  }
  </script>

//子コンポーネント
<template>
    <div >
    </div>
</template>

<script>
export default {
    name: 'Ko',
    methods: {
        hello(){
            console.log('hello')
        }
    }
}
</script>

v-for中に使うときとかはちょっと特殊になる。

この記事見たほうが早い。

v-for内の子コンポーネントのメソッドを親から$refsで呼ぶときにエラーが出てしまうときの対処法 - Qiita

子コンポーネントから親コンポーネントのメソッドを呼び出す

emitを使う。

//Ko.vue
this.$emit('backToTop');

mountedなり好きな場所に書く

//Oya.vue
<RecordForm  @backToTop="changePage"></RecordForm>

//中略
methods: {
  changePage() {
        console.log('親のメソッド発動！)
  },
}

子の中でbackToTop()メソッドが唱えられたら、親内に記述のあるchangePage()メソッドが発火する。

参考記事

子コンポーネントから親コンポーネントのイベントを発火する - Qiita

孫コンポーネントから親コンポーネントのメソッドを発火させたいとき

子孫から先祖内のメソッドを呼び出したいときの方法

//Mago.vue
<template>
    <div>
        <button @click="onClick">Hello World</button>
    </div>
</template>

<script>
export default {
    methods: {
        onClick(event) {
            this.$emit('iii', 'いるなら引数');
            },
    },
}
<script>

//Ko.vue
<Mago:inquiry="inquiry" :ref="'RecordForm' + index" @iii="$listeners['iii']"></Mago>

//Oya.vue
<template>
    <div>
        <Ko @iii="fuga"/>
    <div>
</template>
<script>
export default {
components: {
Ko,
},
methods: {
        onClick() {
            alert('aaa');
        },
    },
}
<script>