使用$parent訪問父級組件實體
點擊打開視頻講解更詳細
和 $root 類似，$parent property 可以用來從一個子組件訪問父組件的實體，它提供了一種機會，可以在后期隨時觸達父級組件，以替代將資料以 prop 的方式傳入子組件的方式，
注意：在絕大多數情況下，觸達父級組件會使得你的應用更難除錯和理解，尤其是當你變更了父級組件的資料的時候，當我們稍后回看那個組件的時候，很難找出那個變更是從哪里發起的，
<template>
<div id="app">
<HelloWorld></HelloWorld>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
data(){
return {
name:'父組件資料'
}
},
mounted(){
},
components:{
HelloWorld
},
computed:{
},
methods:{
changeName(){
console.log('changeName')
}
}
}
</script>
<style scoped>
</style>
src\components\HelloWorld.vue
<template>
<div >
<!-- 使用父組件中data資料 -->
{{ $parent.name }}
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: [],
data(){
return{
}
},
mounted(){
//呼叫父組件中方法
this.$parent.changeName()
},
methods:{
}
}
</script>
<style scoped>
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502149.html
標籤：其他