vue3笔记（3）

1.组件组成

（1）组件组成结构

eg.

（2）组件引用

将app.vue组件代码复制到新建的MyComponent.vue上。

然后在从app.vue里引用MyComponent.vue组件，步骤如下：

2.组件嵌套关系

实现如下：

新建一个pages文件放入各个组件

（1）编写<Header>

然后在app.vue引入header.vue组件。

结果如下

但是发现header有点小，我们发现是main.js中样式影响了

去掉结果如下：

（2）<main>编写

引入组件：

结果如下：

（3）<Aside>

引入组件

结果如下:

（4）<Artical>

在main.vue引入

结果如下所示：

（5）<Item>

引入组件：

结果如下：

3.组件注册方式

（1）局部注册组件

像这种的就是局部注册组件。

（2）全局注册组件

就是将组件导入到main.js上

以header.vue为例

结果也如下所示：

但是还是推荐使用局部注册组件，原因如下

4.组件传递数据_props

简而言之就是父类传值给子类

eg.

新建一个Componet文件，然后在新建一个Parent.vue和Child.vue组件。

然后在App.vue引入组件

结果如图所示：

在父类组件引入子类组件

结果如下：

父组件传递给子组件值：

结果如下：

（2）动态值传递

5.组件传递多种数据类型

举几个eg:

（1）数组类型

结果如下：

（2）对象类型(object)

结果如下：

6.组件传递Props效验

创建两个新组件ComponentA.vue和ComponentB.vue

还可以多种限定

默认值：

就是没传参数就是指定的值

7.组件事件

简而言之就是子传父

新建两个组件，一个是ComponentEvent.vue

子组件通过$emit来传递事件给父组件，最后点击页面按钮，子组件事件会传递到页面上，同理如果传递值也是一样的。

引入组件到app.vue

结果如下：

8.组件事件配合v-model使用

eg.搜索输入框边输入，边显示。

新建两个组件一个Main.vue一个SearchComponent

引入main.vue组件到app.vue组件

结果如下所示：

9.组件数据传递