侧边栏壁纸
  • 累计撰写 106 篇文章
  • 累计创建 3 个标签
  • 累计收到 19 条评论
标签搜索

目 录CONTENT

文章目录

Vue-ElementUi dialog父子组件传值

卑微幻想家
2021-11-26 / 0 评论 / 0 点赞 / 842 阅读 / 4,095 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-03-24,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

最新学习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>

现在页面长这样

image.png

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

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

  1. 父组件调用子组件的时候绑定动态属性
<children :dialogVisible="dialogVisible"></children>
  1. 子组件中使用props进行接收
props:['dialogVisible']

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

image.png

首先调整父组件,增加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>
    

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

image.png

我们在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,大功告成。

0

评论区