vue子组件向父组件传值和实现'抽屉'弹出

子组件

<style>

</style>

<template>
    <div>
        <transition name="slide-fade">
            <div class="side-content">
                <div class="close" @click="close">取消</div>
                <slot name="main"></slot>
            </div>
        </transition>
    </div>
</template>
<script>
export default {
  data() {
    return {
      todos: false,
    };
  },
  created() {
    
  },
  mounted() {
      
    },
  methods: {
    close() {
        this.$emit('childEvent',this.todos);
    }
  }
};
</script>

父组件

<template>
    <div>
        <el-button @click="open">打开</el-button>
        <transition name="popup">
          <Demo @childEvent="parentMethod" v-show="side" class="pop-up" @touchmove.stop.prevent>
            <template slot="main">
                <h1>页面标题</h1>
                <p>A paragraph for the main content.</p>
                <p>And another one.</p>
                <input type="text">
              </template>
          </Demo>
        </transition>
    </div>
</template>
<style>
/* /抽屉 */
.pop-up{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 1;
  z-index: 502;
  background: rgba(0, 0, 0, 0.5);
}
.popup-enter-to,
.popup-leave-to {
  transition: transform 0.3s;
  transform: translate(0px, 0px);
}

.popup-enter,
.popup-leave-to {
  opacity: 0;
  -webkit-transform: translate(0px, 100%);
  transform: translate(0px, 100%);
  -webkit-transition: opacity 0.3s ease-in-out 0.3s,
    -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out 0.3s, transform 0.3s ease-in-out;
}

/* end */
.side-content {
  z-index: 503;
  position: fixed;
  background: #ffffff;
  top: 200px;
  left: 10px;
  bottom: 100px;
  right: 10px;
  -webkit-overflow-scrolling: touch;
}

.close {
  padding: 17px;
  text-align: left;
  color: rgba(0, 122, 255, 1);
}
</style>

<script>
import API from "@/js/API.js";
import Demo from "./Demo";

export default {
  data() {
    return {
      side: false, //抽屉
    };
  },
  components: {
    Demo
  },
  created() {},
  methods: {
    parentMethod(data) {
      this.side = false;
      console.log(data);
      
    },
    open() {
      this.side = true;
    }
  }
};
</script>