vue父子元件資料傳遞方式
阿新 • • 發佈:2019-02-15
父元件向子元件傳值
父元件向子元件傳值簡單,直接在父元件中引用子元件時將資料繫結在子元件中,並在子元件的props屬性中接收即可。
以下是父元件,其中<keep-alive>
標籤表示子元件,將created
階段獲取的值singerData
儲存到vue
的data()
中,並在子元件中通過v-bind:singerData="singerData"
傳遞給子元件,這裡簡寫:singerData="singerData"
。
<template>
<div id="abc">
<div class="nav">
<div class="tab-item">
<router-link to="/first">first</router-link>
</div>
<div class="tab-item">
<router-link to="/second">second</router-link>
</div>
</div>
<keep-alive>
<router-view :singerData="singerData"></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
data() {
return singerData:{}
}
},
created(){
var that = this;
this .$http.get('http://localhost:8081/data.json').then(function (res) {
that.singerData = res.body;
});
}
</script>
從子元件接收,通過methods
中的方法showSomething
驗證。
<script type="text/ecmascript-6">
export default {
props: {
singerData: {
type: Object
}
},
methods: {
showSomething() {
alert(this.singerData.singer2.song1.name);
}
}
}
</script>
子元件向父元件傳值
子元件向父元件傳值較麻煩,一般情況下,子元件發生點選事件時將某值傳遞到父元件,此時可給子元件繫結自定義事件A
,並在此事件中觸發父元件的B
方法。
下面是子元件:
<template>
<div>
<p @click="sendToParent">deliver data to parent </p>
</div>
</template>
<script type="text/ecmascript-6">
export default {
methods: {
sendToParent() {
this.$emit('receiveFromChild','I am data from Child');
}
}
}
</script>
父元件通過繫結的方法接收子元件傳來的值:
<template>
<div id="abc">
<div class="nav">
<div class="tab-item">
<router-link to="/first">first</router-link>
</div>
<div class="tab-item">
<router-link to="/second">second</router-link>
</div>
</div>
<keep-alive>
<router-view :singerData="singerData" @receiveFromChild="showChildMessage"></router-view>
</keep-alive>
</div>
</template>
<script>
export default {
methods:{
showChildMessage(data){
alert(data);
}
}
}
</script>