父组件监听子组件的值

方法一：

目录下新建 bus.js

// eventbus传值  new 的vue实例
import Vue from 'vue'
export default new Vue()

子组件中使用方法：

<script>
import Bus from './../bus.js'
export default {
    data() {
      return {}
    },
    methods: {
        goEdit(){
            Bus.$emit('menuIndex', '4')//传递的值
        },
    }
}
</script>

父组件：

<script>
import Bus from './../bus.js'
export default {
    data() {
      return {
            menuIndex:""
        }
    },
    mounted() {
        Bus.$on("menuIndex", (val) => {
          this.menuIndex = val;
        });
      },
}
</script>

方法二：监听sessionStorage

在main.js中添加

Vue.prototype.resetSetItem = function (key, newVal) {
  if (key === 'ulIndex') {
    // 创建一个StorageEvent事件
    var newStorageEvent = document.createEvent('StorageEvent')
    const storage = {
      setItem: function (k, val) {
        sessionStorage.setItem(k, val)
        // 初始化创建的事件
        newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null)
        // 派发对象
        window.dispatchEvent(newStorageEvent)
      }
    }
    return storage.setItem(key, newVal)
  }
}

在要监听的页面中使用：

<script>
export default {
    data() {
      return {
            ulIndex:sessionStorage.getItem("ulIndex")
        ? sessionStorage.getItem("ulIndex")
        : "1",
        }
    },
   created() {
    window.addEventListener("setItem", () => {
      this.ulIndex = sessionStorage.getItem("ulIndex")
        ? sessionStorage.getItem("ulIndex")
        : "1";
    });
  },
}
</script

修改值的页面：

goRouter(row) {
      if (row == "purchase") {
        sessionStorage.setItem("menuIndex", "7");
        this.resetSetItem("ulIndex", "0");
      }else{
        sessionStorage.setItem("menuIndex", "8");
        this.resetSetItem("ulIndex", "0");
      }
      this.$router.push({
        name: row,
      });
    },

vue3 父传子

//父组件
<template>
<WorkDate :savedUsername="savedUsername" :handleClick="parentClick"></WorkDate>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted} from "vue";
const savedUsername = ref('')
const getusersList = () => {
  getusers().then((res:any) => {
    savedUsername.value = res.data.employeeName
    localStorage.setItem('userName', res.data.employeeName);
  })
}
const parentClick = (value1:any) => {
  value.value = value1
}
onMounted(() => {
  getusersList();
});
</script>

//子组件
<template>
<div class="loginName">
    <span>{{ savedUsername }}</span>
 </div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted} from "vue";
interface Props {
  savedUsername?: string,
  handleClick: (row:any) => void,
}
const props = defineProps<Props>()
const onSubmit = async (formEl: FormInstance | undefined) => {
    let param = {
           remindDate:newData()
     }
     getworkplan(param).then((res:any) => {
           props.handleClick(res.data)
      })
  };
</script>