Vue如何实现父组件给子组件传值，同时子组件改变后，传递给父组件，再去实时的改变子组件的值

父组件

<template>
	<div>
		<el-button class="detail-btn" @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
		<v-experts @sendVal="closeDialog" :centerDialogVisible="centerDialogVisible" v-if="expertsData" :expertsData="expertsData"></v-experts>
	</div>
</template>
<script>
import VExperts from './Experts' // 表示把子组件引入父组件
export default {
	data () {
		return {
			centerDialogVisible: false,  // 控制dialog弹框的不显示
		}
	}
	method: {
		handleClick (val) {
	      this.expertsData = val   // 点击查看按钮进行赋值，然后用v-if可以控制只在有数据的时候在显示dialog弹框
	      this.centerDialogVisible = true  // 控制dialog弹框的显示
	    },
	    closeDialog () {
	      this.centerDialogVisible = false  // 控制dialog弹框的不显示
	    },
	}
	components: {
		VExperts  // 自己定义的
	}
}



</script>

子组件

<template>
	<el-dialog  title="专家详情" :visible.sync="DialogVisible" width="65%"></el-dialog>
</template>
<script>
export default {
	props: ['centerDialogVisible', 'expertsData'], // 父组件给子组件传递值的时候就需要通过props去传递
	computed: {
    DialogVisible: {
      set (val) {
        this.$emit('sendVal', val) // 表示将子组件改变的值传递给父组件
      },
      get () {
        return this.centerDialogVisible // 表示获取父组件的值
      }
    }
  }
}
	
</script>