Vue组件弹窗

weixin_64584369

已于 2023-02-18 11:56:22 修改

阅读量146

点赞数

文章标签： vue.js javascript 前端

于 2023-02-16 13:06:10 首次发布

本文链接：https://blog.csdn.net/weixin_64584369/article/details/129059216

版权

子组件

<template>
    <div>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <--- 内容-->
        </el-dialog>
</div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false
        }
    },
    methods: {
        kuang() {
            this.dialogVisible = true
        }
    }

}
</script>

<style lang="scss" scoped></style>

父组件

<template>

<div>
<el-button icon="el-icon-plus" size="mini" type="primary" @click="addFixedAssets">新增固定资产使用登记</el-button>


</div>

</template>

<tan ref="tanRef" />

<script>
import addFixedAsset from './components/addFixedAsset.vue'
import tan from './tan.vue';

export default {
    components: {
      tan
    },
    data() {
        return {
            Visiable: false,
            dialogVisible: false
        }
    },
    methods: {
        
        addFixedAssets() {
           this.$refs.tanRef.kuang();

        }
    }

}
</script>

<style lang="scss" scoped></style>