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