Vue父组件调用子组件方法----多种写法

Posted 2021-10-04 为了2025的桂花

目录

• 一、父组件中引入子组件
• 二、父组件中调用子组件的方法
  • 1、export default 写法
  • 2、父组件 setup 写法
  • 3、子父组件都用 setup 写法

一、父组件中引入子组件

• 父组件 parent.vue

<template>
    <div>
    <!-- 调用子组件，子组件的全部内容会显示在这个div中 -->
        <Child/>
    </div>
</template>    

<script setup>
// import 子组件的相对路径
import Child from \'./child.vue\' 
</script>

• 子组件 child.vue

<template>
    <div>我是子组件</div>
</template>
<script>
</script>

二、父组件中调用子组件的方法

1、export default 写法

• 父组件 parent.vue

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from \'./child\';

export default {
    methods: {
        handleClick() {
               this.$refs.child.$emit("childmethod")    //子组件$on中的名字
        },
    },
}
</script>

• 子组件 child.vue

<template>
    <div>我是子组件</div>
</template>
<script>
export default {
    mounted() {
        this.$nextTick(function() {
            this.$on(\'childmethods\', function() {
                console.log(\'我是子组件方法\');
            });
        });
     },
};
</script>

2、父组件 setup 写法

• 父组件 parent.vue

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="Child"/>
    </div>
</template>    

<script setup>
import Child from \'./child\';

const Child = ref(null)

function handleClick(){
  Child.value.printfunction();
}


</script>

• 子组件 child.vue

<template>
    <div>我是子组件</div>
</template>
<script>
export default {
    methods() {
        printfunction(){
          console.log(\'我是子组件方法\');
        }  
     },
};
</script>

3、子父组件都用 setup 写法

• 父组件 parent.vue

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="Child"/>
    </div>
</template>    

<script setup>
import Child from \'./child\';

const Child = ref(null)

function handleClick(){
  Child.value.printfunction();
}


</script>

• 子组件 child.vue

<template>
    <div>我是子组件</div>
</template>
<script setup>
  
  function printfunction(){
    console.log(\'我是子组件方法\');
  }  
  
  // 将子组件的方法暴露出去
  defineExpose({
    printfunction
  })
</script>

作者：落花桂

　　　　

出处：https://www.cnblogs.com/nthforsth/

　　　　

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。