vue初学， 希望监听flagShowHeadMenuProp值得变化

Question

父组件
trainlist.vue

子组件
menuHeader.vue

trainlist.vue 引入 menuHeader.vue

<template>
  <div>
    <div class="publicList">
      <div
        class="publicListData mt1"
        @click="handleTableClickEvent()"
      >
      <MenuHeader
 style="float:right;"
 :menus="menus"
 :menuChecked="menuChecked"
 @getCheckedHeader="getCheckedHeader"
 :flagShowHeadMenuProp="flagShowHeadMenuProp"
/>
      </div>
    </div>
  </div>
</template>

触发这个函数handleTableClickEvent改变flagShowHeadMenuProp的值，但是子组件

子组件的代码

props: {
  menus: Array,
 menuChecked: Array,
 flagShowHeadMenuProp: Boolean
},
data () {
  return {
    flagAllSelected: false,
 flagShowHeadMenu: false,
 checkedList: []
  }
},
watch: {
  flagShowHeadMenuProp: function (val) {
    console.log('val == ', val)
  }
}

Answer 1

<MenuHeader
 ref="menuHeader"
 style="float:right;"
 :menus="menus"
 :menuChecked="menuChecked"
 @getCheckedHeader="getCheckedHeader"
/>

handleTableClickEvent() {
    this.$refs['menuHeader'].getVal(this.flagShowHeadMenuProp)
}

子组件

methods: {
    getVal(props) {
        // 获取flagShowHeadMenuProp
    }
}

可以去了解下使用$refs传值

Answer 2

我试了你的写法，是可以监听的
父组件

<button @click="flagShowHeadMenuProp = !flagShowHeadMenuProp">handle</button>
<Test :flagShowHeadMenuProp="flagShowHeadMenuProp"></Test>
....
data() {
  return {
    flagShowHeadMenuProp: true
  }
}

子组件：

<template>
  <div>
    {{flagShowHeadMenuProp}}
  </div>
</template>

<script>
export default {
  name: 'test',
  props: {
    flagShowHeadMenuProp: Boolean
  },
  watch: {
    flagShowHeadMenuProp: function(newVal) {
      console.log(newVal)
    }
  }
}
</script>

<style>

</style>