Vue.js3のx-templateを使った時に、親コンポーネントから子コンポーネントのメソッドを実行したい

Question

Vue.js3のx-templateを使った時に、親コンポーネントから子コンポーネントのメソッドを実行したいのですが、わからなくて困っています。
どなたか解決方法をご存知であれば教えて下さい。

// index.js
const app = Vue.createApp({
    data() {
        return {
            rowData: []
        },
    },

    methods: {
        do () {
            // this.$refs.child2がundefindなのでエラー
            this.$refs.child2.send();
        },
 
        receive(data) {
            this.rowData = data;
        },
    }
});

const childComponent2 = {
    // 親のデータをpropsで受け取る
    props: {
        rowData: Array,
    },

    // 子で再定義
    data() {
        return {
            childRowData: this.rowData
        }
    },

    methods: {
        // $emitで親のイベントを実行
        send() { 
            this.$emit("receive", childRowData);
        },
    },

    template: "#child-component2"
};

app.component("child-component2", childComponent2);

app.mount("#app");

<!-- index.html -->
<div id="app">   
    <button type="button" v-on:click="do()">
</div>

// Partial view (modal)
// child-component2.html

<!-- child-component2.html -->
<script type="text/x-template" id="child-component2">
    <div>
        custom component2★
    </div>
</scirpt>

<child-component2 ref="child2"></child-component2>

2022/02/22 16:17
タイトルと本文を修正しました。
親コンポーネントから子コンポーネントのメソッドを実行したいです。

次のそれぞれの宣言だとは思うのですが、
html : <child-component2 ref="child2"></child-component2>
javascript: this.$refs.child2.send();

Comments

[luuguas]

アクセスと言っていますが、具体的に何をしたいのですか。

[mee12]

コメントありがとうございます。
わかりにくくてすみません。
親コンポーネントから子コンポーネントのメソッドを実行したいです。

Answer 1

コンポーネント間の通信うんぬんの前に、基本的なことが全然できていません。コンポーネントを利用するために必要な下準備ができているか、ちゃんと確認しましょう。

コンポーネントの登録

<!-- child-component2.html -->
<child-component2 ref="child2"></child-component2>

作成した子コンポーネントは、テキトーな場所に配置しても動作しません。親コンポーネントの中に記述しましょう。

さらに、Vueに子コンポーネントの存在を知らせる必要があります。子コンポーネントは親コンポーネントより前で定義し、親コンポーネントにcomponentsプロパティを追加し、子コンポーネントを登録して下さい。

修正後:

<!-- index.html -->
<div id="app">
    <button type="button" v-on:click="do()">
    <!-- 親コンポーネント(#app)内に記述 -->
    <child-component2 ref="child2"></child-component2>
</div>

//子コンポーネントを定義
const childComponent2 = {
    //...
};

const app = Vue.createApp({
    data() {
        return {
            rowData: []
        },
    },
    //子コンポーネントを登録する
    components: {
        'child-component2': childComponent2,
    },
    //...
});

親→子のデータの伝達(Props down)

親のデータを子が受け取れるようにするには、v-bindを使って明示的に渡す必要があります。

修正後:

<!-- index.html -->
<div id="app">
    <button type="button" v-on:click="do()">
    <!-- v-bindで親のデータを子に渡す -->
    <child-component2 ref="child2" v-bind:row-data="rowData"></child-component2>
</div>

これで、子はpropsを使い親のデータを受け取ることができるようになります。

子→親にイベントを送信(Event up)

$emitで子から送信されたイベントは、v-onを使い親のメソッドと結びつけましょう。

修正後:

(コンポーネントの記述が長くなってきたので改行しました)

<div id="app">
    <button type="button" v-on:click="do()">
    <!-- v-onでreceiveイベントを親のreceiveメソッドと結びつける -->
    <child-component2
        ref="child2"
        v-bind:row-data="rowData"
        v-on:receive="receive"
    ></child-component2>
</div>

その他の問題点

<div id="app">
    <button type="button" v-on:click="do()"> <!-- (1)(4) -->
    <child-component2
        ref="child2"
        v-bind:row-data="rowData"
        v-on:receive="receive"
    ></child-component2>
</div>

const childComponent2 = {
    //...
    methods: {
        // $emitで親のイベントを実行
        send() {
            this.$emit("receive", childRowData); //(2)
        },
    },
    //...
};

const app = Vue.createApp({
    data() {
        return {
            rowData: []
        }, //(3)
    },

    methods: {
        do() { //(4)
            this.$refs.child2.send();
        },
        //...
    }
});

(1) 閉じタグ</button>がありません。

(2) childRowDataではなく、this.childRowDataです。thisの付け忘れには十分注意しましょう。

(3) return文の後ろなので、,ではなく;です。

(4) doは予約語なので、関数名として使うことはできません。別の名前に直しましょう。

(1),(4)修正後:

<div id="app">
    <button type="button" v-on:click="send">Click</button>
    <child-component2
        ref="child2"
        v-bind:row-data="rowData"
        v-on:receive="receive"
    ></child-component2>
</div>

const app = Vue.createApp({
    //...
    methods: {
        send() {
            this.$refs.child2.send();
        },
        //...
    }
});

親→子のメソッドを実行

で、肝心の本題ですが、これまで指摘した箇所を修正してもらうと、おそらく正常に動作すると思います。ログを出力して確認してみて下さい。

---

土台となる知識が十分でないままやろうとしても上手くいきませんので、まずは基礎を再確認するところから始めましょう。

Comments

[mee12]

丁寧に教えて頂きありがとうございます。とても勉強になりました。
無事に動作させることができました。

教えて頂いたことを知識の整理のためにまとめてみました。

・コンポーネントの登録
コンポーネントは親コンポーネントの中に記述する。
親コンポーネントのcomponentsプロパティに子コンポーネントを登録する。

・親→子のデータの伝達(Props down)
v-bindを使って渡す
キーの名前がよくわからなく、はまったのですが、
v-bindのキー名ってどうするんだろうと考えていましたが、
変数名の単語をハイフンでつないだ小文字のキーにしなければいけないことを見つけました。

・子→親にイベントを送信(Event up)
v-onを使って親と結びつける。

props, emitともに　v-bind, v-onに任意のキーをつけるような使い方をしたことがなかったので、とても勉強になりました。

また、質問内容に誤記があり、(1)～(4)は初歩的な間違いでしたのでご迷惑をおかけし、すみませんでした。

ありがとうございました。

[luuguas]

Events upじゃなくてEvent upでした…。修正しました。

属性名,変数名についてですが、
- HTMLに記述するコンポーネント名・属性名はケバブケース記法(例: my-app)
- JavaScriptに記述する変数名・メソッド名はキャメルケース記法(例: myApp)
- JavaScriptに記述するコンポーネント名はPascalケース記法(例: MyApp)
を使用することが推奨されています。
v-bindについては、例えば、HTMLで子コンポーネントの属性に v-bind:row-data="~" と書くと、Vueがケバブケース(row-data)からキャメルケース(rowData)に変換し、子コンポーネント内のpropsに同名のプロパティがあれば、そこにデータを渡します。

[mee12]

変数名の書き方についてよくわかりました。
ケバブケースとキャメルケースで相互に変換されるのですね。
ありがとうございます。

現在、Google Chromeブラウザコンソールにrenderに関する警告が出ており、
x-templateをレンダリングする場合、render等を書く必要があるのでしょうか？

renderの書き方が調べてもよくわからなく、うまく表示できませんでした。
もしわかれば教えて頂きたいです。

[luuguas]

今回の質問とは別の話になりますので、新しく質問を立ててください。そのほうが他の方からの回答も得られやすくなりますので。

[mee12]

わかりました。別の質問を立てさせていただきます。
ありがとうございます。