Vue的父组件调用子组件方法

Vue

字数统计: 631阅读时长: 2 min

 2020/08/29   Share

正式工作两个月整了，这期间学了很多前后端开发的技能，还包括应用运维相关的知识，其中我负责了研发项目组整个开发环境的迁移包括Oracle数据库整体迁移、jenkins自动化部署迁移，从这篇分享开始，我将总结这两个月以来学会的相关内容。

没想到第一篇要分享的竟然是前端的内容，在进入项目组之前我所会的只是一些原生的html、js，目前前台最流行的两大框架Vue和React基本没接触过，正式接过来需求之后，因为研发项目组前端人员紧张，我就不得不硬着头皮顶上去前后台一人包，还好刚开始接的需求不是特别复杂，前台页面本来也是有的，只是后端接口没有调通，借此机会也是学会了Vue和后台的基本交互，一些Vue的生命周期。今天要跟大家分享的是Vue页面开发过程中常见的父组件引用子组件的情况，父组件需要调用触发子组件的方法，我们通常的写法，做法其实有很多种，这里我先介绍我常用的方式。

//父组件
<template>
  <div class="father">
    <child ref="mychild"></child>
    <div @click="clickParent">click me</div>
  </div>
</template>
<script>
  import child from '@/components/child.vue'
  export default {
    name: 'father',
    components: {
      child
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("hello child");
      }
    }
  }
</script>

首先父组件在页面中引用子组件，父组件的某一个点击事件发生，就触发子组件的方法。

//子组件
<template>
  <div class="child">
    <h1>我是child组件</h1>
  </div>
</template>
<script>
  export default {
    name: 'child',
    created() {

    },
    methods: {
      parentHandleclick(e) {
        console.log(e)
      }
    }
  }
</script>

其实写法很简单，只是在日常的使用中多了之后，就会让人分不清谁是父组件，谁是子组件。一直以来，我对前端不是特别感冒，但在工作中无法避免的会有涉及到以前不会的内容，这时候就需要自己有耐心。工作不是学生时代的作业，可做可不做，工作做完就能留下来，不做就只能离开，社会就是这样，我也刚刚步入社会，很多事需要慢慢学习。

原文作者：金奇

原文链接：https://www.rossontheway.com/2020/08/29/Vue的父组件调用子组件方法/

发表日期：August 29th 2020, 12:00:00 am

更新日期：August 29th 2020, 2:49:47 pm

Next Post

Java使用POI操作Excel
Previous Post

大数据技术生态体系

CATALOG

