父組件使用
<template>
<div>
<Head :myName="shownexts"></Head>
<div @click="change()"></div>
</div>
</template>
<script>
import Head from './head.vue';
export default {
components:{
Head
},
data() {
return {
shownexts:true
}
},
method:{
change(){
this. shownexts = false;
}
}
}
</script>
在子組件中要監(jiān)聽(tīng)值
<template>
<div class="head flex" :class="!shownexts?'bgBlack':'opbg'">
</div>
</template>
<script>
export default {
name: 'Head',
props: ['myName'],
data() {
return {
shownexts : this.myName // 把傳過(guò)來(lái)的值賦值給新的變量
}
},
watch: {
myName: {
immediate: true, // 這句重要
handler (val) {
this.shownexts=val
}
}
}
}
</script>
