一、过程
父组件中通过
props
传值去控制子组件中根元素的
v-if
，来控制子组件的显示和隐藏。
1、父组件的代码：tttt只是为方便在 F12 看dom元素是不是出现
<template>
<button @click="visible=true">显示子组件</button>
class="tttttttttttttttttttttttttttt"
:visible="visible"
@close="onClose"
</template>
<script>
import son from './son.vue'
export default {
components: {
data () {
return {
visible: false
beforeCreate () {
console.log('father beforeCreate')
created () {
console.log('father created')
beforeMount () {
console.log('father beforeMount')
mounted () {
console.log('father mounted')
beforeDestroy () {
console.log('father beforeDestroy')
destroyed () {
console.log('father destroyed')
methods: {
onClose () {
this.visible = false
</script>
<style>
</style>
2、子组件的代码
<template>
<div v-if="visible">
<h1>子组件</h1>
<button @click="onClose">返回</button>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false
beforeCreate () {
console.log('son beforeCreate')
created () {
console.log('son created')
beforeMount () {
console.log('son beforeMount')
mounted () {
console.log('son mounted')
beforeDestroy () {
console.log('son beforeDestroy')
destroyed () {
console.log('son destroyed')
methods: {
onClose () {
this.$emit('close')
</script>
<style lang="less" scoped>
div {
background-color: skyblue;
</style>
