v-show、v-if、display:none的区别（推荐的父子模板写法）

子组件v-if=“false”，父组件无法调用子组件的方法

（一） 尽可能避免的写法

 // 父组件 (这样写模态框会被记载到父组件中)
 <a-modal title="用户信息完善" v-model="showModal" width="35%">
    <user-info-complete ref="infoModal" v-if="showUserInfo"></user-info-complete>
 </a-modal>
 
 // 请求该方法：this,$refs.infoModal.selectData(); 
 // 当showUserInfo为false时： 调用子组件的方法，是获取不到的，父组件中不存在该dom。
 // 当showUserInfo为true时: 才能调用子组件的方法。

// 子组件
<template>
  // 内容
</template>

<script>
export default {
	methods:{
		selectData() {
			this.showModal = true;
            // 获取弹出框所需数据
            // ...
		}
	}
}
</script>

（一）推荐的写法（将弹出框写在组件中）

 // 父组件 (这样写模态框会被记载到父组件中)
 <template>
    <user-info-complete ref="infoModal"></user-info-complete>
 </template>
 
 // this,$refs.infoModal.selectData(); 调用子组件的方法，使模态框显示

// 子组件
<template>
  <a-modal title="用户信息完善" v-model="showModal" width="35%">
  	//...
  </a-modal>
</template>

<script>
export default {
	data() {
        return {
            showModal: false
        }
    }
	methods:{
		selectData() {
			this.showModal = true;
            // 获取弹出框所需数据
            // ...
		}
	}
}
</script>

（三）总结：

v-show使用display:none实现，会存在于dom树中。

 <h3 v-show="showModal">~~~~</h3>

v-if 为false时直接从dom中去除。

 <h3 v-if="showModal">~~~~</h3>