【VUE实战问题记录】Vue 父组件调用子组件的使用方法

DT从零到壹

已于 2022-08-25 16:12:39 修改

阅读量344

点赞数

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

于 2022-05-10 23:52:03 首次发布

本文链接：https://blog.csdn.net/huang3513/article/details/124700527

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

Vue前端项目父组件调用子组件的时候，调用方式如下：

父组件

<template>
    <div>
        <child ref="refChild"></child>
        <Button type="primary" @click="btnZi">调方法</Button>
    </div>
</template>
<script>
import child from '../../components/child.vue'
export default {
  components: { child },
  data () {
      return {
      }
  },
  methods: {
      btnZi () {
          console.log(this.$refs)
          debugger
          this.$refs.refChild.mYIsZiMethods()
      }
  }
}
</script>

子组件

<template>
    <div @click="mYIsZiMethods ">子组件</div>
</template>
<script>
export default {
    methods: {
        mYIsZiMethods () {
            alert('123')
        }
    }
}
</script>