Vue3案例详解(三)

此篇文章编写于2023年7月5日.如果查阅时间太久请注意版本的迭代.

本篇文章主要针对于初学VUE的新手,对vue网站上的案例进行了详细解释.

在此之前你可以先学习另外几篇介绍:

Vue3案例详解(一)_flame.liu的博客-CSDN博客

Vue3案例详解(二)_flame.liu的博客-CSDN博客

本篇文章将介绍Vue中父子组件的用法,在这之前我们先讨论下,vue项目中的组件结构的问题.

1.在简单项目中,将vue代码,js代码,直接写在html页面中,甚至可以不用到template,直接作用在html标签上;

2.在复杂的项目中,代码可以被分成三个部分:vue,js,html,可以分别对应三类文件.

Vue负责数据结构,逻辑处理和内容的呈现,js负责引用vue,并将vue组件挂载到html页面的一个标签中,html负责最后的呈现.

如果Vue组件比较复杂,而且不能内容需要重复使用的话,可以考虑将功能更小话,也就是可以由多个Vue组成一个功能更强大的Vue.那么这些小的Vue被称为子组件,组成的Vue称为父组件.

这篇文章就是介绍父子组件的使用.代码中有详细的介绍:

1. 在components文件夹中创建child文件夹,用来存储子组件,在child文件夹中创建infoItem.vue文件作为子组件,代码如下:

<!-- 
    每个vu