Vue3 调用子组件的方法

时间 2020-12-02

标签 html vue spa code htm blog table class test 栏目 HTML 繁體版

原文原文链接

Vue3 调用子组件的方法html

// 父组件

<template>
    <div>
　　　　　父页面
        <son-com ref="sonRef"/>
        <button @click="handleClick">test</button>
    </div>
</template>

<script>
import {
  defineComponent,
  ref,
} from 'vue';

export default defineComponent({
    const sonRef = ref(null);
    const handleClick = () => {
        tableFilterDemoRef.value.song();
    }
    setup(){
        return {
              sonRef,
              handleClick,
        }
    }
})
</script>

// 子组件

<template>
    <div>
        子页面
    </div>
</template>

<script>
import {
  defineComponent
} from 'vue';

export default defineComponent({
    const song = () => {
        alert('hellor world');
    }
    setup(){
        return {
             song, // 别忘记 return
        }
    }
})
</script>

若是是TS定义能够使用
vue

const sonRef = ref<null | HTMLElement>(null);

vue2调用子组件方法spa

https://www.cnblogs.com/yuzhongyu/p/10825824.htmlcode