vue子传父、父传子 点击弹框获取数据

vue子传父、父传子 点击弹框获取数据

vue子传父 使用$emit传值

子组件：

<template>
	<div>
		<div slot="footer" class="dialog-footer">
		      <el-button @click="dialogFormVisible = false">取 消</el-button>
		      <el-button type="primary" @click="dialogConfirm">确 定</el-button>
		</div>
	</div>
</template> 
   
<script>
	export default {
	  name: "child",
	  data() {
	    return {
	    };
	  },
	methods：{
	    //子组件通过点击事件执行emit方法，将值传递给父组件
		dialogConfirm: function () {
	        //emit方法接收两个参数，第一个为自定义事件，第二个为传递的值
	        this.$emit("confirmRoom", row);
	    },
	}
}
</script>

父组件：

<template>
	<div>
		<el-form-item label="room" prop="meeting_room">
			<!-- 点击input框 -->
			<el-input @click.native="showRoom()" v-model="dataForm.meeting_room" auto-complete="off" clearable  maxlength="255" show-word-limit  placeholder="请选择" readonly>
			</el-input>
		</el-form-item>

		<!-- 弹出框 -->
		<el-dialog append-to-body title="标题" :visible.sync="dialogFormVisible">
	      <!-- 使用组件
	      父组件内通过自定义事件接收子组件传来的值并赋值   $emit相当于一个中转站
	      ref 被用来给DOM元素或子组件注册引用信息
	       -->
	      <child
	        @confirmRoom="changeRoom"
	        :isselect="isSelect2"
	        :isday="isday2"
	        ref="meetingroomselect"/>
	    </el-dialog>
    </div>
</template>  

<script>
//使用import 引入
import child from "@/views/child";
export default {
  name: "parent",
  //components中注册
  components: {
    child,
  },
  methods:{
		changeRoom(data) {
	      console.log(data, 1234);
	      console.log(data.room_name);
	      this.dataForm.meeting_room = data.room_name;
	      this.dataForm.meeting_room_id = data.room_id;
	      this.dataForm.address = data.address;
	      this.dialogFormVisible = false;
    	},
	}
}
</script>

父传子 子组件通过props接收参数

父组件：

<template>
  <div>
      <child
        @confirmRoom="changeRoom"
        :isselect="isSelect2"
        ref="meetingroomselect"
      />
  </div>
</template>

<script>
	import child from "@/views/child ";
	export default {
	  name: "parent",
	  components: {
	    child
	  },
	  data（）{
		  return {
		      isSelect2: false
	      }
	  }
	}
</script>

子组件:

<template>
  <div>
    <el-table
    	highlight-current-row
    	v-if="isselect"
    	border
    	:data="tableData"
    	tooltip-effect="dark">
      <el-table-column
      	prop="room_name"
      	label="名称"
      	show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  export default {
    // 接收父组件的值
     props: {
	    // type 指定数据类型 default 默认值
	    isselect: {
	      // 标题栏显示与隐藏 只接收布尔值
	      type: Boolean,
	      // 如果值为空，默认为 false
	      default: false,
	    },
	  },
  }
</script>