父子组件传递
子组件页面名称：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() },
子组件接收父组件传递的myId和myMemberId参数
直接写到export default里面就行，声明一个props对象，里面有myId和myMemberId两个参数，参数名称要和父组件中的参数名称保持一个，我在上面已经强调过了
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>
请认真看下这篇文章，你就知道父子组件传递的原理及流程，如果有不明白的博主，私信我，欢迎打扰哦！！！
