vue 中父组件值改变子组件数据不变

作者: 配角_2763 | 来源:发表于2022-03-05 22:07 被阅读0次

父组件使用

<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>