Vue.jsでVuexを使わずに他コンポーネントのプロパティやメソッドを操作する方法

はじめに
親コンポーネントにアクセスする方法
- $parent
- provide/injectによる依存性注入
子コンポーネントにアクセスする方法
- ref属性
それぞれの注意点
- 参考

はじめに

本記事は編集中なので、全方法は網羅していません。

ググったときにvuexとかばかり出てきて忘れてしまうので、早見表みたいな位置づけです。

コードも具体的な呼び出し方を示すためのみで、コンポーネントとしての動作は確認していないので注意が必要です。

(公式にもほぼおなじ記事があったのでそっちの方見たほうがよさそう)

親コンポーネントにアクセスする方法

$parent

$parentを使うと、1個上のコンポーネントにアクセスできる。使い方は以下のように、methodやdataへアクセスできる。

//子
export default {
    methods:{
        parentAccess(){
        this.$parent.parentMethod(this.$parent.parentData)
        }
    }
}

//親
export default {
    data:function(){
        return {
            parentData: "parant"
        }
    },
    methods:{
        parentAccess(showData){
            console.log(showData)
        }
    }
}

なお$parent.$parentとすると2個上の親コンポーネントにアクセスできるが、このような方法は当然ながら推奨されてない。

代わりに次の項目に示すような依存性をコンポーネントに注入する方法を使う方法がある。

provide/injectによる依存性注入

簡単に言うと、provideがexportみたいな役割で、injectがimportみたいな役割をしている。

それぞれdataやmethodsと同じようにコンポーネントのキーとして設定する。

//子
export default {
    inject:['parentMethod'],
    method:{
        this.parentMethod("execute parent method")
    },
}
//親
export default {
    provide(){
        return {
            parentMethod: this.show
        }
    },
    methods:{
        show(showData){
            console.log(showData)
        }
    }
}

現状ではmethods以外では確認できていないが、おそらくdata等も渡せるのではないかと思う。

子コンポーネントにアクセスする方法

ref属性

Vue.jsではコンポーネントを利用するときにtemplateで子コンポーネントのHTMLタグにref属性を付与することで、親コンポーネント側で$refsを使うことで操作することができる。

//子
export default {
    data():{
        return {
            childData:"get child data"   
        }    
    }
}

//親
<template>
    <child ref="ch" />
</template>
<script>
from 'Child' import '~/components/Child.vue'
export default {
    component:{
        'Child'
    },
    methods:{
        show(){
            console.log(this.$refs.ch.childData)
        }
    }
}
</script>