vue.js で　親側から、子コンポーネントのデータを参照・取得したい。

Vue.js において、子のコンポーネント内　のデータを、親側にて参照や取得したいのですが、
どの様にすれば良いのでしょうか？

例としましては、下記の様に、【sample】コンポーネントの中にあるデータ【name:田中】を、

親側の、ボタンクリック　で【name:田中】を参照し使用したいのですが、

子のコンポーネント【sample】側の【イベント】で、データを子から親へ渡すのではなく、

【親側で必要なタイミング】で、参照や取得をしたいのです。

宜しくお願い致します。

Vue.js
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>テスト</title>
6</head>
7<body>
8    <div id="app">
9        <button v-on:click="clk">ボタン</button>
10        <sample></sample>
11    </div>
12    <script src="./vue.js"></script>
13    <script>
14        Vue.component('sample', {
15            template: '<div>名前</div>',
16            data: function () {
17                return {
18                    name:"田中",
19                }
20            },
21        });
22        var vm = new Vue({
23            el: "#app",
24            data: {
25            },
26            methods:{
27                clk:function(){
28                    alert() //←ここで、sample　の　コンポーネント　の　data の name を使いたい。
29                }
30            }
31        })
32    </script>
33</body>
34
35</html>

行動規範の内容に同意します

回答1件

ベストアンサー

$refsを使用することで親コンポーネントから子コンポーネントにアクセスできます。
参考
https://jp.vuejs.org/v2/guide/components-edge-cases.html#子コンポーネントインスタンスと子要素へのアクセス

投稿2021/03/11 05:54

gogoweb_ikeda

総合スコア1426

miya38

2021/03/11 06:41

ありがとうございました。下記の様に、$refs　を入れてみましたら、【name:"田中"】の【田中】が表示されました。ありがとうございます。 <div id="app"> <button v-on:click="clk">ボタン</button> <sample ref="refsample"></sample> ←★refを入れまして。 </div> 　：　： methods:{ clk:function(){ alert(this.$refs.refsample['name']) } }

miya38

2021/03/11 06:44

ありがとうございます。下記の様に、$refsを入れました、【name:"田中"】の【田中】が表示されました。ありがとうございました。 <div id="app"> <button v-on:click="clk">ボタン</button> <sample ref="refsample"></sample> </div> 　　：　　：　methods:{ 　 clk:function(){ 　 alert(this.$refs.refsample['name']) 　} 　}

行動規範の内容に同意します