Vue 父组件如何触发子组件中的方法

最新推荐文章于 2024-08-16 13:11:52 发布

_格鲁特宝宝

最新推荐文章于 2024-08-16 13:11:52 发布

阅读量737

点赞数

分类专栏： Vue Web FrontEnd 文章标签： Vue Vue 父组件调用子组件方法父组件触发子组件方法

_格鲁特宝宝原创，转载请务必注明出处

本文链接：https://blog.csdn.net/GrootBaby/article/details/105952997

版权

本文介绍了在Vue中，父组件如何正确触发子组件的方法。首先，父组件需要导入并定义子组件，然后通过`ref`属性引用子组件。在调用子组件方法时，由于可能子组件尚未初始化完成，可能会遇到`undefined`异常。解决办法是在调用子组件方法时添加延时处理，确保子组件已经完全初始化。

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

子组件

<template>
  <div>
    child
  </div>
</template>
 
<script>
  export default {
    name: "child",
    props: "someprops",
    methods: {
      parentHandleclick(e) {
        console.log(e)
      }
    }
  }
</script>

父组件

<template>
  <div>
    <button @click="clickParent">点击</button>
    <child ref="mychild"></child>
  </div>
</template>
 
<script>
  import Child from './child';
  export default {
    name: "parent",
    components: {
      child: Child
    },
    methods: {
      // this.$refs.mychild.parentHandleclick("")
      clickParent() {
        this.$refs.mychild.parentHandleclick("我是父组件点击触发的");
      }
    }
  }
</script>