vue组件父子传值（弹出层版本）（监听）

示例：

点击页面上的“选择谈话地点”后按需要的功能是查询当前是否已经申请了谈话地点，如果已经申请了，显示出谈话地点的申请信息，如果没有申请则显示空白，

方法实现思路：点击父页面的按钮的时候，将父页面的编号传值给子页面，子页面拿到值后，用这个值在自身表数据重查询，有数据就显示，没数据就不现实

代码：

template中最后一个div内：

//定义按钮

<el-button plain style="margin-right: 2%" v-show="qx!='query'" type="warning" @click="selectRoom"><i
  class="el-icon-house"></i> 选择谈话地点
</el-button>

//引入弹出组件页面

<roomSelect ref="roomSelect" :zdth-bh="zdthBh" @getroom="getroom"></roomSelect>

注：zdthBh就是要传的编号

getroom是点击事件

<script>中：

import roomSelect from "@/views/business/talkrecord/talkAdressSelect.vue";//组件位置

export default {
  name: "Talkrecordsedit",
  components: {roomSelect},//引入组件

method：

//选择谈话地点
    selectRoom(){
      this.zdthBh = this.talkrecord.zdthBh;
      this.openwt = true;
      this.$refs.roomSelect.dialogVisible = true;
    },

//子页面回值操作

getroom(val){
  this.dialogVisible=false;
  this.zdthTalkapply=val.zdthTalkapply

},

子页面：

1：接收参数

2通过参数判断进行操作

这个判定的方法其实已经写好了，但是因为vue组件的问题，当父页面创建时就回去加载子页面，但是这个时候你再去点击按钮传值，，子页面就不接了，所以每次都不显示，这个时候就要用到监听器传值的方法了