vue3.0父组件调用子组件中的方法

发布于:2023-03-12 ⋅ 阅读:(159) ⋅ 点赞:(0)

父组件
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
  }
}

网站公告

今日签到

点亮在社区的每一天
去签到