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

张旭超
English

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

avatar
张旭超
前端开发工程师

精通 html+div+css jquery, vue, angularjs, angular2, angular4, ionic, ionic2

1.2k 声望
175 粉丝
0 条评论
你知道吗?

avatar
张旭超
前端开发工程师

精通 html+div+css jquery, vue, angularjs, angular2, angular4, ionic, ionic2

1.2k 声望
175 粉丝
宣传栏