我試圖在單擊按鈕時傳遞一個函式，在子元素中單擊該按鈕，然后通過父元素傳遞給另一個子組件，我不想為此使用商店，我該怎么做？
components/footer/footer.vue -- 這是點擊按鈕的地方
<template>
<div class="footer-bottom-header-menu-bar mob" @click="showMenu">
<img src="~/assets/svg/menubar.svg" alt=" " />
</div>
</template>
<script>
export default {
methods: {
showMenu() {
this.$emit("show-menu");
}
}
}
</script>
layouts/default.vue -- 這是接收點擊函式并將其傳遞到 app-header
<template>
<div>
<app-header />
<Nuxt />
<app-footer @show-menu="showMenu()"/>
</div>
</template>
<script>
import header from "~/components/header/header";
import footer from "~/components/footer/footer";
export default {
components: {
'app-header': header,
'app-footer': footer
},
methods: {
showMenu() {
console.log("clicked");
}
}
}
</script>
components/header/header.vue -- 我希望點擊函式在這個組件內執行一個動作
<script>
export default {
data() {
return {
showMenuBar: false
}
},
}
</script>
uj5u.com熱心網友回復：
你為什么擔心傳遞一個函式？
當您emit將show-menu事件簡單地撥動了一塊像這樣的父組件的資料：
<template>
<div>
<app-header :showMenuBar="showMenuBar" />
<Nuxt />
<app-footer @show-menu="showMenu"/>
</div>
</template>
<script>
import header from "~/components/header/header";
import footer from "~/components/footer/footer";
export default {
components: {
'app-header': header,
'app-footer': footer
},
data() {
return {
showMenuBar: false;
};
},
methods: {
showMenu() {
// I would make this more dynamic than always
// hardcoding it to true, but you get the idea
this.showMenuBar = true;
}
}
}
</script>
然后在你AppHeader簡單地把它當作道具：
<script>
export default {
props: {
showMenuBar: {
type: Boolean,
default: false,
},
}
</script>
uj5u.com熱心網友回復：
您可以在父組件上宣告任何屬性：
data() {
return { toBeWatched: 0 };
}
- 然后將它像道具一樣從父級傳遞給標題子級：
<app-header :Trigger="toBeWatched" /> - 當您收聽
@show-menu事件（來自頁腳子項）時，對您的屬性進行任何更改：
<app-footer @show-menu="toBeWatched " /> - 最后，您可以在標題子項上觀察此更改并觸發您的功能。
<script>
export default {
data() {
return {
showMenuBar: false
};
},
props: ['Trigger'],
watch: {
Trigger() {
this.showMenuBar = !this.showMenuBar; // or do whatever you want
console.log('showMenuBar : ' this.showMenuBar);
}
}
};
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/372759.html