zoukankan      html  css  js  c++  java
  • 子组件返回按钮父组件

    父组件代码   demo

    <template>
    <div>
    <!-- 父组件数据 -->
    <!-- 通过showFlag判断子父组件得隐藏和现实,默认父组件为现实 true -->
    <div v-if="showFlag">
    <el-button type="primary" size="mini" @click = "handleClick">进入子组件</el-button>
    </div>
    <!-- 子组件 -->
    <childen-one v-else :handleShow = "handleShow"></childen-one>
    </div>
    </template>
    <script>
    import childenOne from '@/components/democ/childenOne.vue'

    export default {
    data() {
    return {
    showFlag:true
    }
    },
    components:{
    'childen-one':childenOne
    },
    methods:{
    // 点击进入子组件 状态为false 进子组件
    handleClick() {
    this.showFlag = false
    },
    // 子组件调用的方法,由父组件传递给子组件
    handleShow() {
    this.showFlag = true
    }
    }
    }
    </script>

    子组件 childenOne

    <template>
    <div>
    <el-button type="success" size="medium" @click="back">返回</el-button>

    </div>
    </template>
    <script>
    export default {
    props: {
    handleShow: {
    type: Function
    }
    },
    methods: {
    back() {

    //调用父组件中方法,控制true
    this.handleShow();
    },
    }
    };
    </script>

  • 相关阅读:
    【CF617D】Roads in Yusland
    对偶问题
    【LG3722】[HNOI2017]影魔
    [HEOI2017] 相逢是问候
    [SHOI2009] 会场预约
    [SCOI2007] 修车
    [CTSC2008] 网络管理
    [国家集训队] 礼物
    [Poetize6] IncDec Sequence
    [网络流24题] 魔术球问题
  • 原文地址:https://www.cnblogs.com/yoututu/p/14150365.html
Copyright © 2011-2022 走看看