這篇文章主要介紹了詳解VUE里子組件如何獲取父組件動態(tài)變化的值，子組件通過props獲取父組件傳過來的數(shù)據(jù)，子組件存在操作傳過來的數(shù)據(jù)并且傳遞給父組件,需要的朋友可以參考下。
在VUE里父組件給子組件間使用props方式傳遞數(shù)據(jù)，但是希望父組件的一個狀態(tài)值改變?nèi)缓笞咏M件也能監(jiān)聽到這個數(shù)據(jù)的改變來更新子組件的狀態(tài)。
場景：子組件通過props獲取父組件傳過來的數(shù)據(jù)，子組件存在操作傳過來的數(shù)據(jù)并且傳遞給父組件。
比如想實(shí)現(xiàn)一個switch開關(guān)按鈕的公用組件：
1.父組件可以向按鈕組件傳遞默認(rèn)值。
2.子組件的操作可以改變父組件的數(shù)據(jù)。
3.父組件修改傳遞給子組件的值，子組件能動態(tài)監(jiān)聽到改變。
比如父組件點(diǎn)擊重置，開關(guān)組件的狀態(tài)恢復(fù)為關(guān)閉狀態(tài)：
方法1：
1、因?yàn)榇嬖谧咏M件要更改父組件傳遞過來的數(shù)據(jù)，但是直接操作props里定義的數(shù)據(jù)vue會報(bào)錯，所以需要在data里重新定義屬性名并將props里的數(shù)據(jù)接收。
2、首先想到的肯定是在computed計(jì)算屬性里監(jiān)聽數(shù)據(jù)的變化，那就直接在computed里監(jiān)聽父組件傳遞過來的props數(shù)據(jù)的變化，如果有變動就進(jìn)行操作，如：
export default {
name: 'SwitchButton',
props: {
status: {
type: Boolean,
default () {
return false
}
}
},
data () {
return {
switchStatusData: this.status // 重新定義數(shù)據(jù)
}
},
computed: {
switchStatus: function () {
return this.status // 直接監(jiān)聽props里的status狀態(tài)
}
}
}
}
這樣就可以在使用switchStatus的地方動態(tài)的監(jiān)聽到父組件status的變化。似乎只針對簡單的數(shù)據(jù)類型有效。
方法2：
使用watch和computed組合實(shí)現(xiàn)：如
export default {
name: 'SwitchButton',
props: {
status: {
type: Boolean,
default () {
return false
}
}
},
data () {
return {
switchStatusData: this.status
}
},
computed: {
switchStatus: function () {
return this.switchStatusData // 監(jiān)聽switchStatusData 的變化
}
},
watch: {
status (newV, oldV) { // watch監(jiān)聽props里status的變化，然后執(zhí)行操作
console.log(newV, oldV)
this.switchStatusData = newV
}
},
methods: {
switchHandleClick () {
this.switchStatusData = !this.switchStatusData
this.$emit('switchHandleClick', this.switchStatusData)
}
}
}
下面是實(shí)現(xiàn)該組件的代碼：
<template>
<span class="switch-bar" :class="{'active': switchStatus}" @click="switchHandleClick"><span class="switch-btn"></span></span>
</template>
<script>
export default {
name: 'SwitchButton',
props: {
status: {
type: Boolean,
default () {
return false
}
}
},
data () {
return {
switchStatusData: this.status
}
},
computed: {
switchStatus: function () {
return this.status
}
},
// watch: {
// status (newV, oldV) {
// console.log(newV, oldV)
// this.switchStatusData = newV
// }
// },
methods: {
switchHandleClick () {
this.switchStatusData = !this.switchStatusData
this.$emit('switchHandleClick', this.switchStatusData)
}
}
}
</script>
<style lang="stylus" scoped>
@import "~styles/varibles.styl"
.area-wrapper
line-height: .8rem;
padding: 0 .4rem;
.switch
float: right;
font-size: 0;
.switch-bar
position: relative;
display: inline-block;
width: .8rem;
height: .4rem;
border-radius: .4rem;
background: #ddd;
border: 2px solid #ddd;
vertical-align: middle;
transition: background .3s, border .3s;
&.active
background: $bgColor;
border: 2px solid $bgColor;
.switch-btn
left: .4rem;
background: #fff;
.switch-btn
position: absolute;
left: 0px;
display: inline-block;
width: .4rem;
height: .4rem;
border-radius: .2rem;
background: #fff;
transition: background .3s, left .3s;
</style>
