方法一:
目录下新建 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>