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>

  • 相关阅读:
    ORM是什么?
    mysql 杂谈
    IO model之IO多路复用的触发方式
    IO model之select poll epoll IO多路复用介绍
    IO model
    事件驱动模型介绍
    函数
    商品程序
    随机生成密码
    import radom 和import string
  • 原文地址:https://www.cnblogs.com/yoututu/p/14150365.html
Copyright © 2011-2022 走看看