Ant design Vue Передача компонентов родитель-потомок (кодовый случай — вы можете написать этому блоггеру личное сообщение, если вы не понимаете)

Перенос компонентов родитель-потомок

Имя страницы дочернего компонента: tumorUp
Имя страницы родительского компонента:tumorUpList

Код родительского компонента (tumorUp)

анализ кода

Шаг 1: Зарегистрируйте подкомпоненты и введите параметры передачи в код
Параметр 1: myId( 这个参数名字要和子 组件接收这个参数的名字一样，否则可能出现接收不到值的问题)
Параметр 2: myMemberId

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

Шаг 2: Эти два параметра передаются через другие страницы при нажатии и переходе, см. следующий код.

    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
   }
 }

Выше показано, как берутся два параметра, переданные компоненту. Давайте поговорим о том, как родительский компонент вызывает родительский компонент. Добавьте метод
很重点哈
в родительский компонент . Этот метод также отражен в приведенном выше коде. Это позиция моего for, где отображается дата, и этот метод будет запускаться, когда я нажимаю на определенную дату. Забыл сказать, добавьте еще один, введение кода подкомпонента выглядит следующим образомmethodsonItemClick

import tumorUp from './tumorUp'
// 在export default {}注册一下
 components: {
    
     tumorUp },

onItemClick(id) {
    
    
     this.$nextTick(() => {
    
    
       this.$refs.tumorUp.doSomething(id);
     });
   },

Я объявил doSomething в дочернем компоненте для запуска при изменении события родительского компонента и передал идентификатор, принадлежащий

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

Подкомпонент (tumorUpList)

这个地方非常重要，子组件代码, вам нужно только объявить метод doSomething в дочернем компоненте, потому что этот метод будет вызываться, когда я не нажму дату в родительском компоненте для рендеринга данных.Этот метод является методом рендеринга обновления страницы.Весь
子组件methods里声明doSomething方法，这样就完成了父子组件传递процесс когда родительский компонент щелкает определенную дату, вызывает метод doSomething() дочернего компонента, а затем дочерний компонент вызывает метод getByMemberId() для реализации родительско-дочернего компонента, передающего данные динамического рендеринга this.getByMemberId ()

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

Дочерний компонент получает параметрыmyId и переданные родительским компонентом.Просто пропишите его прямо в экспорте по умолчанию,объявите один , а в нем два параметра.Название параметра должно совпадать с именем параметра в родительском компоненте.Я подчеркнули вышеmyMemberId
props对象myIdmyMemberId

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

Просто присвойте значение нормально в этом месте присваивания.Я добавил в это место проверку значения.

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

На этом месте находится код опухолевого списка родительского компонента, который является кодом 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>

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