Transferencia de componentes padre-hijo

Nombre de la página del componente secundario: tumorUp
Nombre de la página del componente principal:tumorUpList

Código del componente principal (tumorUp)

análisis de código

Paso 1: registrar subcomponentes e introducir parámetros de paso en el código
Parámetro 1: myId( 这个参数名字要和子组件接收这个参数的名字一样，否则可能出现接收不到值的问题)
Parámetro 2: myMemberId

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

Paso 2: estos dos parámetros se pasan al hacer clic y saltar a través de otras páginas, consulte el siguiente código

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

Voy a recibir en esta página

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

Lo anterior es de dónde provienen los dos parámetros pasados al componente. Hablemos de cómo el componente principal llama al componente principal. Agregue un método
很重点哈
en el componente principal . Este método también se refleja en el código anterior. Es la posición de mi for loop, donde se muestra la fecha, y este método se activará cuando haga clic en una fecha determinada. Olvidé decir, agregue uno más, la introducción del código de subcomponente es la siguientemethodsonItemClick

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

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

Declaré hacer algo en el componente secundario para que se active cuando el evento del componente principal cambie y pasé una identificación que pertenece a

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

Subcomponente (tumorUpList)

这个地方非常重要，子组件代码, solo necesita declarar el método doSomething en el componente secundario, porque este método se llamará cuando no haga clic en una fecha en el componente principal para representar los datos. Este método es el método de representación de actualización de página. Todo el
子组件methods里声明doSomething方法，这样就完成了父子组件传递proceso es cuando el componente principal hace clic en una determinada La fecha es, llama al método doSomething() del componente secundario, y luego el componente secundario llama al método getByMemberId() para realizar que el componente principal-secundario pasa datos de representación dinámica this.getByMemberId ()

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

myIdEl componente secundario recibe los myMemberIdparámetros y pasados por el componente principal.
Simplemente escríbalo directamente en el valor predeterminado de exportación, declare uno y props对象hay dos parámetros en él. El nombre del parámetro debe ser el mismo que el nombre del parámetro en el componente principal. I han enfatizado arribamyIdmyMemberId

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

Simplemente asigne un valor normalmente en este lugar de asignación. Agregué una verificación de valor a este lugar.

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

Este lugar es el código tumorUpList del componente principal, que es el código de la parte 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>

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