Vue-ElementUi dialog父子组件传值

最新学习Vue和ElementUI，边学边做，在此记录下在Vue中使用ElementUI的dialog，将dialog封装成子组件后，父组件与子组件如何相互传值，并且控制dialog的显示与关闭。

首先我们定义一个子组件Children.vue

<template>
  <el-dialog title="" width="30%" center>
    这是一个dialog
    <template #footer>
      <span class="dialog-footer">
        <el-button>取消</el-button>
        <el-button type="primary">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "Children"
}
</script>

<style scoped>

</style>

然后再定义一个父组件Parent.vue，父组件中引用子组件

<template>
  <children></children>
  <el-button type="primary">打开</el-button>
</template>

<script>
import Children from "@/components/Children";

export default {
  name: "Parent",
  components: {Children}
}
</script>

<style scoped>

</style>

现在页面长这样

然后，我们通过点击打开按钮，向子组件传值，用来弹出dialog

父组件如何给子组件传参呢？

1. 父组件调用子组件的时候绑定动态属性

<children :dialogVisible="dialogVisible"></children>

2. 子组件中使用props进行接收

props:['dialogVisible']

我们可以给子组件传值，控制dialog的显示，官方文档如图

首先调整父组件，增加visible属性，将该属性绑定到子组件上，点击按钮时将visible赋值为true

<template>
  <div class="container">
    <children :visible="visible"></children>
    <el-button type="primary" @click="openDialog" >打开</el-button>
  </div>
</template>

<script>
import Children from "@/components/Children";

export default {
  name: "Parent",
  components: {Children},
  data(){
    return{
      visible: false,
    }
  },
  methods:{
    openDialog(){
      this.visible = true
    }
  }
}
</script>

<style scoped>

</style>

我们再来看子组件，子组件中，我们增加了centerDialogVisible属性，利用该属性进行动态的打开和关闭dialog，

父组件的参数我们通过props进行接收，然后监控这个属性的改变，然后改变centerDialogVisible

<template>
  <div class="container">
    <el-dialog v-model="centerDialogVisible" title="" width="30%" center>
      这是一个dialog
      <template #footer>
      <span class="dialog-footer">
        <el-button>取消</el-button>
        <el-button type="primary">保存</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Children",
  props: ['visible'],
  data() {
    return {
      centerDialogVisible: false
    }
  },
  watch: {
    visible() {
      this.centerDialogVisible = this.visible
    }
  }
}
</script>

<style scoped>

</style>

这时候我们会发现，我们打开了dialog,但是当关闭之后，在此点击打开按钮时却没有反应，这是因为，第一次点击按钮时我们将visible设置为true，但是关闭之后，并没有将visible设置为false，导致关闭后再次点击，其实visible并没有改变

这里我们将讲第二个知识点：

子组件如何向父组件传参？

1. 子组件调用this.$emit()方法

   this.$emit(flag,true)
   

2. 父组件通过绑定函数进行接收

   <children @flag='getFlag'></children>
   <script>
     methods: {
     	getFlag(val){
     		console.log(val)
     	}
     }
   </script>
   

那么现在先对子组件进行调整

我们在dialog关闭的回调方法中向父组件进行传参

<template>
  <div class="container">
    <el-dialog v-model="centerDialogVisible" title="" width="30%" center @close="closeDialog">
      这是一个dialog
      <template #footer>
      <span class="dialog-footer">
        <el-button>取消</el-button>
        <el-button type="primary">保存</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Children",
  props: ['visible'],
  emits:['isClose'], //不写这个控制台会有警告
  data() {
    return {
      centerDialogVisible: false
    }
  },
  methods:{
    closeDialog(){
      this.$emit('isClose',true)
    }
  },
  watch: {
    visible() {
      this.centerDialogVisible = this.visible
    }
  }
}
</script>

然后父组件接收参数

<template>
  <div class="container">
    <children :visible="visible" @isClose="isClose"></children>
    <el-button type="primary" @click="openDialog" >打开</el-button>
  </div>
</template>

<script>
import Children from "@/components/Children";

export default {
  name: "Parent",
  components: {Children},
  data(){
    return{
      visible: false,
    }
  },
  methods:{
    openDialog(){
      console.log('打开')
      this.visible = true
    },
    isClose(val){
      this.visible = !val
    }
  }
}
</script>

到这里我们就可以自由的控制dialog了。

好像还差点什么，取消按钮这里怎么处理呢？其实很简单，只需要这样:

<el-button @click="centerDialogVisible = false">取消</el-button>

OK，大功告成。