我想知道一些事情。
我有一个全局组件,它是一个music-player.vue,代码如下:
<button class="btn bg-[#a47551] hover:text-gray-50 p-3 shadow-xl" @click="togglePlayback">
<span class="material-symbols-outlined">
{{ isPlaying ? "pause" : "play_arrow" }}
</span>
</button>
<script>
import { onMounted, ref } from "vue";
export default {
setup() {
const audio = new Audio();
const isPlaying = ref(false);
function togglePlayback() {
if (isPlaying.value) {
pausePlayback();
} else {
playPlayback();
}
}
function playPlayback() {
if (!isPlaying.value) {
audio.play();
isPlaying.value = true;
}
}
function pausePlayback() {
if (isPlaying.value) {
audio.pause();
isPlaying.value = false;
}
}
function handlePlaybackStart() {
isPlaying.value = true;
}
function handlePlaybackPause() {
isPlaying.value = false;
}
onMounted(() => {
audio.src = "./../../../assets/song/1.mp3";
audio.loop = true;
audio.addEventListener("play", handlePlaybackStart);
audio.addEventListener("pause", handlePlaybackPause);
});
return {
togglePlayback,
isPlaying,
};
},
};
</script>
我的问题是:我还想在单击Home.vue上的lihatUndangan按钮时触发togglePlayback()按钮。下面是我的代码:
<button class="btn bg-[#a47551] text-gray-50" @click="lihatUndangan">Lihat undangan</button>
<script>
import { ref } from 'vue';
import { useRouter } from "vue-router";
export default {
data() {
return {
namaTamu: '',
};
},
mounted() {
const isPlaying = ref(false);
const audio = new Audio();
const namaTamu = localStorage.getItem('namaTamu');
if (!namaTamu) {
const namaInput = window.prompt('Masukkan nama:');
if (namaInput && namaInput.trim() !== '') {
localStorage.setItem('namaTamu', namaInput);
this.namaTamu = namaInput;
} else {
this.namaTamu = 'Tamu Undangan';
}
} else {
this.namaTamu = namaTamu;
}
setTimeout(() => {
this.isLoading = false;
}, 500);
},
setup() {
const router = useRouter();
function lihatUndangan() {
router.push('/welcome');
}
return {
lihatUndangan
};
}
};
</script>
有人能给予我一个建议或建议吗?我是新来的,谢谢你:)
1条答案
按热度按时间uttx8gqw1#
如果你想从另一个组件控制一个组件的逻辑,你可以传递一个pub/sub对象给props。在Home.vue中调用pubsub.exec(),在music-player.vue中调用pubsub.subscribe(()=>...或者使用常规的Vue提供/注入方法(https://vuejs.org/guide/components/provide-inject.html)