vue 中父组件值改变子组件数据不变
2022-03-05 本文已影响0人
配角_2763
父组件使用
<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>
在子组件中要监听值
<template>
<div class="head flex" :class="!shownexts?'bgBlack':'opbg'">
</div>
</template>
<script>
export default {
name: 'Head',
props: ['myName'],
data() {
return {
shownexts : this.myName // 把传过来的值赋值给新的变量
}
},
watch: {
myName: {
immediate: true, // 这句重要
handler (val) {
this.shownexts=val
}
}
}
}
</script>
