正式工作两个月整了,这期间学了很多前后端开发的技能,还包括应用运维相关的知识,其中我负责了研发项目组整个开发环境的迁移包括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>
其实写法很简单,只是在日常的使用中多了之后,就会让人分不清谁是父组件,谁是子组件。一直以来,我对前端不是特别感冒,但在工作中无法避免的会有涉及到以前不会的内容,这时候就需要自己有耐心。工作不是学生时代的作业,可做可不做,工作做完就能留下来,不做就只能离开,社会就是这样,我也刚刚步入社会,很多事需要慢慢学习。