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>
