Ant design Vue 父子组件传递(代码案例--不懂的地方可以私信本博主)

简介: Ant design Vue 父子组件传递(代码案例--不懂的地方可以私信本博主)


父子组件传递

子组件页面名称:tumorUp

父组件页面名称:tumorUpList

父组件代码(tumorUp)

代码解析

第一步: 注册子组件,并在代码中引入传递参数

参数一:myId(这个参数名字要和子 组件接收这个参数的名字一样,否则可能出现接收不到值的问题

参数二:myMemberId

<tumor-up ref="tumorUp" :myId='id' :myMemberId='memberId' />

第二步: 这两个参数是通过其它页面点击跳转也得时候传递过来,请看如下代码

selecttumorUpList(row) {
      this.$router.push({
        path: '/sggg/xxxx?id=' + row.id + '&memberId=' + row.memberId,
      })
    },

我在这个页面去进行接收

activated() {
   if (this.$route.query.id) {
     this.id = this.$route.query.id
     this.memberId = this.$route.query.memberId
   }
 }

以上是说的传递给组件的这两个参数是怎么来的,下面来说下父组件通过什么方式去调用父组件

很重点哈

在父组件的methods里添加一个方法,onItemClick这个方法我在上面代码中也体现到了,就是我的那个for循环那个位置,显示日期的地方,当我点击某个日期时就会触发这个方法。

忘了说啦,补充一句,引入子组件代码如下

import tumorUp from './tumorUp'
// 在export default {}注册一下
 components: { tumorUp },
onItemClick(id) {
     this.$nextTick(() => {
       this.$refs.tumorUp.doSomething(id);
     });
   },

我在子组件声明了doSomething用来监听父组件事件改变时进行触发传入了一个id属于

this.$refs.tumorUp.doSomething(id);

子组件(tumorUpList)

这个地方非常重要,子组件代码,在子组件你只需要声明doSomething方法,因为父组件中当我没点击一次日期的时候就会调用这个方法,渲染数据

子组件methods里声明doSomething方法,这样就完成了父子组件传递,这个方法就是页面刷新渲染的方法,整个流程是当父组件点击某个日期是,调用子组件的doSomething()方法,然后子组件在去调用getByMemberId()方法,实现父子组件传递动态渲染数据 this.getByMemberId()

doSomething(id) {
      this.id = id
      this.getByMemberId()
    },

子组件接收父组件传递的myIdmyMemberId参数

直接写到export default里面就行,声明一个props对象,里面有myIdmyMemberId两个参数,参数名称要和父组件中的参数名称保持一个,我在上面已经强调过了

export default {
  name: 'tumorUp',
  props: {
    myId: String,
    myMemberId: String,
  },

赋值这个地方就正常赋值就行,我这个地方加了一个值验证

if (this.myMemberId != null) {
    this.memberId = this.myMemberId
  }

这个地方是父组件的代码tumorUpList,是html部分的代码

<template>
  <div class='box'>
    <div v-if='list.length > 0' class='box-list'>
      <div class='follow'>
      <!-- 注册并引入子组件,并传递两个参数 -->
        <tumor-up ref="tumorUp" :myId='id' :myMemberId='memberId' />
      </div>
      <!-- 这段代码呢是一个列表,这里我用了一个for循环,主要是显示日期的,年月日时分秒,当我点击某个日期时,去刷新子组件页面,渲染当前我点击日期的数据 -->
      <div class='list'>
<!--        <div v-for='item in list' class='li' @click='memberId = item.id'>{{ item.createTime }}</div>-->
        <div v-for="item in list" class="li" @click="onItemClick(item.id)">
          {{ item.createTime }}
        </div>
      </div>
      
    </div>
    <div v-else class='null'>
      暂无数据
    </div>
  </div>
</template>

请认真看下这篇文章,你就知道父子组件传递的原理及流程,如果有不明白的博主,私信我,欢迎打扰哦!!!

目录
相关文章
|
1天前
|
JavaScript Java 测试技术
基于小程序的移动学习平台+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的移动学习平台+springboot+vue.js附带文章和源代码说明文档ppt
8 0
|
1天前
|
JavaScript Java 测试技术
基于小程序的汽车保养系统+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的汽车保养系统+springboot+vue.js附带文章和源代码说明文档ppt
5 0
|
1天前
|
JavaScript Java 测试技术
基于小程序的童装商城+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的童装商城+springboot+vue.js附带文章和源代码说明文档ppt
8 0
|
1天前
|
JavaScript Java 测试技术
基于小程序的个人行政复议在线预约系统+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的个人行政复议在线预约系统+springboot+vue.js附带文章和源代码说明文档ppt
7 0
|
1天前
|
JavaScript Java 测试技术
微信点餐小程序+springboot+vue.js附带文章和源代码说明文档ppt
微信点餐小程序+springboot+vue.js附带文章和源代码说明文档ppt
5 0
|
1天前
|
JavaScript Java 测试技术
基于小程序的订餐系统+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的订餐系统+springboot+vue.js附带文章和源代码说明文档ppt
6 0
基于小程序的订餐系统+springboot+vue.js附带文章和源代码说明文档ppt
|
1天前
|
JavaScript Java 测试技术
基于小程序的教师管理系统+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的教师管理系统+springboot+vue.js附带文章和源代码说明文档ppt
5 0
|
1天前
|
JavaScript Java 测试技术
基于小程序的实习记录小程序+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的实习记录小程序+springboot+vue.js附带文章和源代码说明文档ppt
5 0
|
1天前
|
JavaScript Java 测试技术
基于小程序的学生公寓电费信息+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的学生公寓电费信息+springboot+vue.js附带文章和源代码说明文档ppt
6 0
|
1天前
|
JavaScript Java 测试技术
基于小程序的设备故障报修管理系统+springboot+vue.js附带文章和源代码说明文档ppt
基于小程序的设备故障报修管理系统+springboot+vue.js附带文章和源代码说明文档ppt
6 0