Vue项目中在父组件中直接调用子组件的方法

最新推荐文章于 2024-08-07 14:55:26 发布

麻辣_水煮鱼

最新推荐文章于 2024-08-07 14:55:26 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue 在父组件中直接调用子组件的方法

本文链接：https://blog.csdn.net/weixin_42217154/article/details/110187021

版权

vue 专栏收录该内容

58 篇文章 5 订阅

订阅专栏

通过ref直接调用子组件的方法

父组件：

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

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

export default {
    methods: {
        handleClick() {
              this.$refs.child.getCode();
        },
    },
}
</script>

子组件

<template>
  <div>这是子组件</div>
</template>
<script>
export default {
  methods: {
    getCode() {
      console.log('这是子组件的方法');
    },
  },
};
</script>