Vue中父子页面值的监听（具体场景：根据父页面tab的切换带动值的变动，子页面通过监听值得变化来显示不同的内容）

1.父页面的相关代码如下：

<!--父页面-->
<view class="check">
    <!--父页面切换tab标签代码-->
    <van-tabs class="tabs" :class="scrollTop > 44 ? 'tabSticky' :'' " @click="onClick">
	    <van-tab :title="item" v-for="item in titleList" :key="item"></van-tab>
	</van-tabs>
	<view class="swiperImage">
		<swiperImage title="检测"></swiperImage>
	</view>
    <!--父页面引入子页面的依赖，name为子页面监听父页面的值-->
	<examList :name="name"></examList>	
</view>

<!--父页面引入子页面-->
import checkList from "./****/****/exam-list.vue"

data() {
  return {
    //tab切换模块值的集合
    titleList:['A模块', 'B模块'],
    //父子页面监听的值
    name: 0,
  };
},
methods:{	
   //切换tabs的点击事件，改变监听值name
   onClick(event) {
	 console.log("切换tabs:", event.detail)
     //对name进行赋值，此处name值取tabs中集合数据的位置顺序值
	 this.name = event.detail.name;
   }
}

2.子页面的相关代码如下：

//子页面exam-List相关代码
export default {
  //父组件的数据需要通过props才能下发到子组件中,子页面在此处进行申明
  props:{
    //name为子页面需要监听父页面的值name,名称和父页面一样
	name:{
      //该属性的数据类型
	  type:String
	}
  },
  data() {
	return {
	  //模拟当前的name值
	  currentName: 0,
	};
  },
  //子页面监听父页面name值的变化
  watch:{
    //newVal代表新值，oldVal代表旧值
	name(newVal, oldVal){
      //newVal或者oldVal代表父页面tabs集合里数据的位置顺序值，0代表第一位，1代表第二位
	  if(oldValue == 0){
		 //此处操作相关业务代码。。。。。。
	  }else if(oldValue == 1){
		 //此处操作相关业务代码。。。。。。
	  }
	}
  }
}

3.希望能帮助需要的人！