親から子のデータやメソッドを参照する場合（$refs）

子コンポーネントにrefを設定しておけば、親コンポーネントから子コンポーネントのメソッドやデータにアクセスできます。

詳細な流れ

子コンポーネント側にrefを設定
- 子コンポーネントでrefを設定することで、親コンポーネントからその子コンポーネントを参照できるようになります。
親コンポーネントで子コンポーネントを参照
- 親コンポーネントからthis.$refsを使って、子コンポーネントのインスタンスにアクセスできます。
- これにより、子コンポーネントのメソッドやデータにアクセスできます。

具体例

1) 子コンポーネント (`ChildComponent.vue`)

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from child!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Message changed by parent!';
    }
  }
}
</script>

2) 親コンポーネント (`ParentComponent.vue`)

<template>
  <div>
    <ChildComponent ref="childComp" />
    <button @click="accessChild">Change Child Message</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    accessChild() {
      // 子コンポーネントのメソッドとデータにアクセス
      console.log(this.$refs.childComp.message);  // 'Hello from child!'
      this.$refs.childComp.changeMessage();      // 子コンポーネントのメソッド呼び出し
      console.log(this.$refs.childComp.message);  // 'Message changed by parent!'
    }
  }
}
</script>

ポイント

親コンポーネントのthis.$refs.childCompで、子コンポーネントのインスタンスにアクセスできます。
this.$refs.childComp.messageで、子コンポーネントのdata（ここではmessage）にアクセスできます。
this.$refs.childComp.changeMessage()で、子コンポーネントのmethods（ここではchangeMessage）を呼び出すことができます。

注意点

$refsは親コンポーネントがマウントされた後でアクセス可能です。つまり、親コンポーネントがレンダリングされる前にアクセスしようとするとundefinedになることがあります。
$refsでアクセスできるのは、子コンポーネントのインスタンスやDOM要素ですが、一般的に子コンポーネントのインスタンスが返されます。