zoukankan      html  css  js  c++  java
  • 点击按钮弹出子组件

    项目中有好多弹框,一开始让他们公用一个弹框,弹框中再加载不同的子组件,并不好用,下面的提交按钮得写好多判断。

    页面有点乱。想着直接各个页面中直接弹框,后续再把各种按钮提交的值传给父组件。。。。。。

    父子传值搞的脑袋有点短路,要消化吸收要不断学习。

    主页面中   

    <template>
    <div class="app-container">
    <el-button @click="handleClick" type="text" size="small">查看</el-button>
    <children @CB_dialogStatus="CB_dialogStatus" :dialogStatus="dialogStatus"></children>
    </div>
    </template>
    <script>
    import children from './test/child.vue'
    export default {
    data() {
    return {
    dialogStatus: false,
    };
    },
    methods:{
    handleClick () {
    this.dialogStatus = true;
    },
    CB_dialogStatus () {
    this.dialogStatus = false;
    }
    },
    components:{
    children
    }
    };
    </script>

    子组件中
    <template>
    <el-dialog title="收货地址" :visible.sync="dialogFormViseble" @close="closeDialog">
    <el-table :data="gridData">
    <el-table-column property="date" label="日期" width="150"></el-table-column>
    <el-table-column property="name" label="姓名" width="200"></el-table-column>
    <el-table-column property="address" label="地址"></el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormViseble = false">取 消</el-button>
    <el-button type="primary" @click="dialogFormViseble = false">确 定</el-button>
    </div>
    </el-dialog>
    </template>
    <script>
    export default {
    props: ['dialogStatus'],
    /* props: {dialogStatus:Boolean} ,*/

    data () {
    return {
    gridData: [{
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
    }],
    dialogFormViseble:false,
    }
    },
    methods: {
    closeDialog () {
    this.$emit('CB_dialogStatus')
    }
    },
    watch:{
    dialogStatus(newLv,oldLv){
    this.dialogFormViseble=newLv
    }
    }
    }
    </script>
  • 相关阅读:
    Higher-Order Functions and Lambdas
    dispatch_sync:As an optimization, this function invokes the block on the current thread when possible
    为什么使用dispatch_sync
    如何安全使用dispatch_sync
    dispatch_sync
    Dispatch Queues and Thread Safety
    高阶函数-参数与返回值
    In Swift, typedef is called typealias:
    偏函数应用(Partial Application)和函数柯里化(Currying)
    Centos下添加用户到用户组
  • 原文地址:https://www.cnblogs.com/pengyczjg/p/13254447.html
Copyright © 2011-2022 走看看