关于Vue3父子组件通信的疑问！

请教下各位
第一种

第二种

初学，学的比较乱，哪种写法比较合理，之前用第一种也可以正常实现一些功能，现在遇到问题，第一种会存在搜索框内容没清空，所以想到v-if销毁一下，重新加载，就出问题了。

第一个问题 有关代码不详 应该是哪冲突了
第二个问题 父子间通过 prop传到子组件的值是动态的 大哥比方 父传给子 一个数字16 此时父组件修改这个数字变成20 子组件收到的值就是20 不需要额外监听,另外这种传参是单向的,尽量不要在子组件直接修改父组件的值.

第二种 ref 就是使 数据变为响应式啊 。变成响应式了，页面 只要数据一变页面自然会变。props 本来就是实时的

用 v-if 解决 input 清空 是 不合理的v-if=true 是 直接销毁 组件 了,消耗很大的。 第一种内容不能清空 你v-model 是双向绑定的，按道理 把绑定的值赋值为""空字符串就行了。

目前来说 你这两种 都不太合理

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7762845
• 我还给你找了一篇非常好的博客，你可以看看是否有帮助，链接：关于在vue中使用v-for对数组循环，再对数组中对象的某一个属性修改值，试图不更新
• 除此之外, 这篇博客: vue 进入到一个新路由页面后，路由组件页面缓存，如何实现路由组件刷新重载？中的 1-1、设置要刷新的组件v-if，通过v-if实现页面组件层重载。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• <template>
  	<el-container>
  	  <el-header>Header</el-header>
  	  <el-container>
  	    <el-aside width="200px">Aside</el-aside>
  	    <el-main v-if="isRouterCache">  <router-view  /></el-main>
  	  </el-container>
  	</el-container>
  </template>
  <script>
  export default {
   name:'Layout',
   data () {
     return {
       isRouterCache: true
     }
   },
   methods: {
     reload () {
       this.isRouterCache = false
       this.$nextTick(() => (this.isRouterCache = true))
     }   
   }
  }
  </script>
  

  注意：当前组件其实是layout.vue组件他的上一层还有app.vue组件。

• 您还可以看一下 徐照兴老师的Vue全家桶从基础入门到进阶项目实战第四篇综合进阶项目篇课程中的 为条件查询设置重置功能小节, 巩固相关知识点