乐趣区

关于vue3:vue30父组件调用子组件中的方法

父组件
ParentComponents.vue

<!-- 1. 在子组件上绑定 ref -->
<children-component :ref="getChildList"></children-component>
...
<script>
  import {ref} from 'vue'
  export default {setup () {
      // 2、父组件中定义和 ref 同名的变量
      const getChildList = ref(null)
      onMounted (() => {// 4、调用子组件中的 getList() 办法
        console.log(getChildList.value.getList())
      })
      return {
        // 3、return 进来
        getChildList
      }
    }
  })

</script>

子组件

setup () {
  // 办法
  const getList = () => {console.log('子组件中的办法')
  }
  return {getList}
}
退出移动版