这是我参与「第四届青训营」笔记创作活动的第一天，今天想记录vue中父子组件之间怎么起作用，下边是从vue3版本来讲的。
vue文件基本模板
这里就拿我们小组的项目页面的头部代码文件来举例子吧
父组件与子组件
自己一开始接触的时候也不太懂父组件和子组件之间是怎么作用的,后来在自己的实践下才懂了,自己对他们的总结就是:页面的某个部分的代码可以分出来装成一个组件,可见,一个项目是可以有很多很多个组件的,如果一个组件在另一个组件中被引入,那么,引进其他组件进来的这个文件就是父组件,而被引进去的这个组件就是子组件
这么说如果还不理解的话,可以看下边的图:
- 父组件
在父组件里需要将子组件引进并且起个名字,例如上图中Item就是在父组件中子组件的名字
父组件中,在<script></script>标签引入子组件如果是用上图的方式,也就是在<script>代码块上添加setup,那么子组件就不需要被注册再使用,因为<script setup>范围里的值也能被直接作为自定义组件的标签名使用;而如果在标签内使用setup()函数,则需要给子组件注册,可以看图:
- 子组件
什么时候可以封装一个组件,然后可以被其他组件引用呢?个人觉得有很大相似的功能和样式的从而可以被复用的,就可以拿出来做成一个组件,而在其他组件中,如果需要该组件就可以引进去,这样子可以提高效率,也方便许多
父子组件传值
- 父传给子
父组件传过去的名字要与在子组件中接收到的名字一样,否则,子组件将接收不到值.
在子组件中,用props来接收,但是我这里是用<script setup>,所以要用defineProps来定义和接收,这一步完了之后就可以在子组件里使用父组件传过来的那个值了.
-
子传给父
子组件传给父组件中,子组件要用emits定义,但是我这里是用<script setup>,所以用defineEmits定义,remove在这里是函数,这里的例子是传一个函数,父与子组件互相接收,所以传过去的这个函数名字也是要一样的
总结
父子组件的使用在项目的开发中是经常经常用到的,是很重要的一部分,一开始自己感觉挺复杂的,但是如果仔细去思考,是能够很快就上手的,也是比较简单的.
如果有什么补充,欢迎大家一起来聊聊哟!
