從vue.js中的子組件更改父組件

Question

我有一個名爲App.vue的主要組件，它包含一些html div元素和一個路由器視圖。形成一個分配給路由的組件，我想在App.vue中顯示/隱藏div（如果在子組件中單擊一個按鈕，在父組件中顯示一個div，爲另一個按鈕顯示另一個div，.etc）。我嘗試傳遞一個道具到路由器視圖並更新prop prom孩子，但它顯示錯誤。我怎樣才能做到這一點？

Answer 1

你可以聽一個事件在router-view標籤，並採取相應的行動：

const child = { 
 
    template: `<div style="margin-bottom:100px"> 
 
    <button @click="$emit('clicked')">Toggle div</button> 
 
    </div>` 
 
} 
 

 
const router = new VueRouter({ 
 
    routes: [ { path: '/child', component: child } ] 
 
}) 
 

 
new Vue({ 
 
    router, 
 
    el: '#app', 
 
    data: { displayMe: 'block' }, 
 
    methods: { 
 
    toggleMe: function() { 
 
     this.displayMe = (this.displayMe === 'block') ? 'none' : 'block'; 
 
    } 
 
    } 
 
})

#hideme { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: orange 
 
}

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> 
 

 
<div id="app"> 
 
    <div> 
 
    <div id="hideme" :style="{display: displayMe}"></div> 
 
    </div> 
 
    <router-link to="/child">Visit child</router-link> 
 
    <router-view @clicked="toggleMe()"></router-view> 
 
</div>

對於多個divs，您可以將事件傳遞給一些數據，並通過$event處理函數的參數（例如：toggleMe($event)）接收它，並分別解析樣式屬性。例如，您可以使用ref屬性跟蹤每個div屬性，並使用{ '1': 'block', ...}之類的結構保存具有data對象的對象，並使用方法檢索樣式。

Answer 2

請參閱這些章節從官方指南，找到答案：

https://vuejs.org/v2/guide/components.html#Composing-Components https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow