Vue如何实现父组件给子组件传值,同时子组件改变后,传递给父组件,再去实时的改变子组件的值
父组件<template><div><el-button class="detail-btn" @click="handleClick(scope.row)" type="text" size="small">查看</el-button><v-experts @sendVal="closeDialog" :centerDial...
·
父组件
<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>
更多推荐
已为社区贡献1条内容
所有评论(0)