Vue父子组件生命周期与v-if

湖深似海

于 2020-06-24 09:23:40 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45944856/article/details/106936912

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

本文探讨了在Vue中，当父组件通过v-if指令控制子组件的显隐时，子组件的生命周期并不会受到影响。然而，在这种情况下，父组件无法直接获取到子组件的DOM元素，因此建议使用watch来监听控制子组件显示隐藏的变量，以便进行必要的DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提：子组件受父组件的变量控制显示隐藏v-if。

父

<template>
  <div class="home">
	<home-child :show="msg" />
	<button @click="btnClick">按钮</button>
  </div>
</template>

<script>
import HomeChild from './HomeChild.vue'
export default{
name:'Home',
components:{HomeChild},
data(){
	return {
		msg:false
	}
},
methods:{
	btnClick(){
		this.msg = !this.msg
	}
}
}
</script>

子

<template>
	<div class="homechild" v-if="show">
		<div><span>1</span></div>
		<div><span>1</span></div>
		<div><span>2</span></div>
		<div><span>2</span></div>
		<div><span>2</span></div>
	</div>
</template>

<script>
export default {
	name:"HomeChild",
	props:{
		show: {
		default: false
		}
	},
mounted(){
	alert(11)
var a = document.querySelector('.homechild')
var b = a.querySelectorAll('div')
console.log(b)
  }
}
</script>