Vue ElementUI Dialog对话框实现组件间传值

2023-11-11 02:45:54

概述

在ElementUI中，Dialog是一个模态对话框组件，可以用来显示各种各样的内容，比如表单、消息、提示等。Dialog组件可以作为父组件，包含其他子组件。在这种情况下，我们需要在父组件和子组件之间传递数据，以实现组件之间的通信。

实现组件间传值

1. 父组件向子组件传递数据

父组件可以使用props属性向子组件传递数据。props是一个特殊的属性，它允许父组件将数据传递给子组件。子组件可以通过props属性来接收父组件传递的数据。

例如，在父组件中，我们可以使用props属性向子组件传递一个名为"message"的数据：

<template>
  <div>
    <Dialog :message="message">
      <template v-slot:default>
        {{ message }}
      </template>
    </Dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

在子组件中，我们可以通过props属性来接收父组件传递的数据：

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

2. 子组件向父组件发送事件

子组件可以使用emit方法向父组件发送事件。emit方法允许子组件向父组件发出一个自定义事件。父组件可以通过监听这个自定义事件来处理子组件发送的数据。

例如，在子组件中，我们可以使用$emit方法向父组件发送一个名为"closeDialog"的自定义事件：

<template>
  <div>
    <button @click="closeDialog">关闭对话框</button>
  </div>
</template>

<script>
export default {
  methods: {
    closeDialog() {
      this.$emit('closeDialog')
    }
  }
}
</script>

在父组件中，我们可以使用@closeDialog事件监听器来监听子组件发送的closeDialog事件：

<template>
  <div>
    <Dialog @closeDialog="handleCloseDialog">
      <template v-slot:default>
        {{ message }}
      </template>
    </Dialog>
  </div>
</template>

<script>
export default {
  methods: {
    handleCloseDialog() {
      // 处理子组件发送的数据
    }
  }
}
</script>