vue2弹出框组件demo

原创于 2025-10-28 20:20:31 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue2 #vue2弹出框组件 #父子传值

vue2弹出框组件demo

1、效果

在这里插入图片描述

2、弹出框组件

<template>
  <div>
    <div>
      <h1>{{ msg }}</h1>
    </div>
    <el-button @click="handleClose">取消</el-button>
    <el-button type="primary" @click="handleConfirm">确定</el-button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      this.$emit("update", "fei chang hao");
      
    },

    // 确认选择
    handleConfirm() {
      this.$emit("confirm", "123456789");
    },
  },
};
</script>

3、父级容器(调用方)

<template>
  <div id="app">
    <payment-terms-dialog :msg="hao"  @confirm="handleUserConfirm" @update="updateMsg"/>
    {{form.userName}}
  </div>
</template>
<script>
import PaymentTermsDialog from './components/PaymentTermsDialog.vue'
export default {
  name: 'App',
  components: {
    PaymentTermsDialog
  },
  data() {
    return {
      selectedUserName: '',
      dialogVisible: false,
      hao:"hao1",
      form: {
        userName: ''
      }
    }
  },
  methods: {
    handleUserConfirm(selectedUser) {
      this.form.userName = selectedUser
    },
    updateMsg(hao){
      this.hao=hao;
    }
  }
}
</script>