vue 页面传参，不通过路由传参

1，vue 传参，不通过路由传参

1，项目文件结构

list.vue
tab1.vue
tab2.vue
tab3.vue

2，list.vue 文件

<template>
  <div class="tabs_warp">
    <button type="primary" @click="handleSearch"> 查询 </button>
  </div>
</template>

<script>
export default {
 data() {
    return {
      searchForm: {
        searchKey: '',
        selectedCarInfo: []
      },
      searchFormValue: {}
    }
  },
  methods: {
    handleSearch(){
      this.searchFormValue = { ...this.searchForm }
    }
  }
}
<script>

3，... tab1.vue 文件

<script>
export default {
 computed: {
    searchFormValue () {
      return this.$parent.$data.searchFormValue
    }
  },
  watch: {
    searchFormValue(value){
      if(value){
        console.log('路由跳转获取另一个页面数据变化监听值')
      }
    }
  },
}
<script>