vue 父组件通过$refs获取子组件的值和方法详解

// children.vue

<template>
 <div>我是 children</div>
</template>

<script>
export default {
 data: () => ({
  sonData: '我是子组件的数据！'
 }),
 methods: {
  sonMethod() {
   console.log('我是子组件的方法！')
  }
 },
 puted: {
  
 },
 created() {

 }
}
</script>

// 父组件

<template>
 <div>
  <children ref='ch'>
  </children>
  <h1 @click="onclick">父组件</h1>
 </div>
</template>

<script>
import children from './s/children'
export default {
 data() {
  return {}
 },
 ponents: {
  children
 },
 methods: {
  onclick() {
  // 或者 let chil = this.$refs['ch']
   let chil = this.$refs.ch

  // 父组件可以通过$refs拿到子组件的对象
  // 然后直接调用子组件的 methods里的方法和data里的数据
   console.log(chil) //子组件对象
   console.log(chil.sonData) // 我是子组件的数据
   console.log(chil.sonMethod()) // 我是子组件的方法
  }
 }
}
</script>