vue项目中父组件调用子组件的方法

最新推荐文章于 2023-08-12 10:28:25 发布

lyn@

最新推荐文章于 2023-08-12 10:28:25 发布

阅读量226

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43959024/article/details/125524588

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了在Vue项目中，父组件如何调用子组件的方法。方法一是通过`ref`属性直接调用，例如在父组件的`handleClick`方法中调用`this.$refs.child.resetFields()`；方法二是利用`$emit`和`$on`，子组件在`mounted`钩子中注册`$on`监听，并在父组件中通过`$emit`触发。这两种方式都是Vue中实现父子组件通信的常见实践。

摘要由CSDN通过智能技术生成

vue项目中父组件调用子组件的方法：

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

//父组件中
<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    
<script>
import Child from './child';
export default {
    methods: {
        handleClick() {
              this.$refs.child.resetFields();
        },
    },
}
</script>
//子组件中
<template>
  <div>我是子组件</div>
</template>
<script>
export default {
  methods: {
    resetFields() {
      console.log('我是子组件的方法');
    },
  },
};
</script>

方案二：通过组件的 $e m i t 、$ on方法；

//父组件中
<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>
//子组件中
<template>
    <div>我是子组件</div>
</template>
<script>
export default {
    mounted() {
        this.$nextTick(function() {
            this.$on('childmethods', function() {
                console.log('我是子组件方法');
            });
        });
     },
};
</script>