嘿，我真的是 VUE 的新手，對于這個專案，我在一個頁面上有一個按鈕，它應該觸發或呼叫另一個頁面的功能。每個人都會喜歡為什么你沒有按鈕和功能在同一頁面上，因為我正在嘗試學習如何呼叫不同頁面的功能然后在我的專案中實作的基本部分。在我提問時，我試圖讓它更容易和清晰。
當我呼叫 from 的方法函式時chairPage.vue，homePage.vue它會拋出一個錯誤，說worldnot defined on homePage.vue。誰能解釋我為什么會收到此錯誤以及解決此問題的最佳方法是什么。
我有兩頁，一頁是 homePage.vue，另一頁是chair.Vue。我有一個按鈕，homePage.vue它應該呼叫chairPage.vue.
主頁
<template>
<div id="homepage">
<b-button variant="info" @click="buttonClicked()">Click</b-button>
<chairComponent ref="world"/>
</div>
</template>
<script>
import chairComponent from '@/components/chair.vue';
export default {
props: [],
methods:{
buttonClicked(){
this.$refs.world.hello();
}
}
}
</script>
主席頁面
<template>
<div id="chairComponent">
<p v-if="displayText == '1'"> HELLO WORLD </p>
</div>
</template>
<script>
export default {
props: ['world'],
data(){
return{
displayText:'',
}
},
methods:{
hello(){
console.log('inside child component hello function');
this.displayText = '1';
}
}
}
</script>
uj5u.com熱心網友回復：
您可以將道具傳遞給您的子組件，然后觀看道具和呼叫函式：
Vue.component('Chair', {
template: `
<div id="chairComponent">
<p v-if="displayText == '1'"> HELLO WORLD </p>
</div>
`,
props: ['world'],
data(){
return{
displayText:'',
}
},
methods:{
hello(){
console.log('inside child component hello function');
this.displayText = '1';
}
},
watch: {
world() {
if (this.world) this.hello()
}
}
})
new Vue({
el: '#demo',
data() {
return {
val: null
}
},
methods:{
buttonClicked(){
this.val = true
}
}
})<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
<div id="homepage">
<b-button variant="info" @click="buttonClicked">Click</b-button>
<chair :world="val" />
</div>
</div>uj5u.com熱心網友回復：
您可以從子級 $emit到父 級 https://vuejs.org/v2/guide/components-custom-events.html
孩子
hello () {
...//yours code
this.$emit('customEvent', someValue)
}
家長
<template>
<child
@cutomEvent="function"
/>
<template>
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/421940.html
標籤：
上一篇：按鈕作業正常，但僅在第二次單擊時
下一篇：單擊觸發它創建的事件偵聽器