vue3知识点4组件/定义组件/组件数据传递父传子/子传父/非父子/slot插槽/动态组件

vue3知识点4组件

一、组件概念

为了保证项目结构划分更加清晰，可以把一部分代码提取出来作为一个组件单独存在 页面要用的时候引入即可 ，对每一个组件的维护友好。

1.什么时候用组件

例如一个页面布局，有导航，有轮播，有正文，有底部。然后另一个页面比如说也要有轮播图片，效果是一样的。我们就不能把相同的代码写很多遍，然后我们就需要单独封装一个轮播功能的组件，哪个页面用到这个功能，嵌入这个组件就可以了，页面布局的结构来说比较清晰。

所以说，这个页面就是父组件，那轮播就是子组件。

常用的就是每个页面布局一样的，比如头部，轮播，底部，这几个我们可以给它提出去作为一个组件。

2.父子组件

父组件 A 界面 包含B

子组件 B

3.定义组件

一个组件的构成：

每一个组件都是由：视图层 数据层 vm层 （ vue实例对象）

Vue实际上可以理解为一个根组件，或者是说最外层的父组件。

在vue框架的项目中 一个组件会单独存放在一个后缀名为.vue文件中。

创建一个组件方法：

组件既然是类似一个新的根组件，那么做法也是类似的。

1）视图层：在根div,id=app 外面 定义template标签，id为temp。在这里面写内容。

2）数据层：在数据层写一个tempdata对象,负责组件的data。

3）组件绑定视图层：回想我们的根组件在定义的时候，用vm.mount("#app")来绑定的视图层，那在组件中tempapp就相当于vm,用template来绑定视图层。绑定内容就是组件的id名：#temp1。

如上图：定义一个组件。

​

父子组件绑定视图层的不同：

可以看出子组件在绑定视图层的时候是通过template绑定的，

而父组件是通过vm.Mount(“#app”)绑定视图层的。

定义一个组件后，这个组件里面也可以用生命周期钩子函数，计算属性，函数等。和vm的用法一样。

4）把定义好的子组件注册到父组件app中。

定义好一个组件后需要与父组件关联起来，父组件才可以用它，有两种注册方式。

组件的注册方式：

全局注册：

写在vm外面下面即可。

第一个参数：随便起，用于在视图层渲染时用这个名。最好和定义时起一样的便于区分。

第二个参数：刚才定义组件时起的组件名。

局部注册：

局部组件用的比较多，因为好维护。

5）在父组件视图层中某个指定位置渲染子组件。

组件定义全部代码：

全局注册组件和局部注册组件的全部代码链接

二、数据传递

数据定义在哪个组件内，就只能在哪个组件去用，子不能用父的data,父不能用子的data，那有些功能就是要求，需要用到对方的数据，这个时候我们就需要它们互相传递数据。

父组件向子组件传递数据 props

1.先在父组件的数据层定义好要传递的数据 nav

2.在子组件的标签中 绑定属性，属性名随便写个navdata,值为父组件中定义的数据 nav

​

3.在子组件中定义props:[“navdata”] ,props和template平级，接收传递过来的数据 。

​

4.在子组件的视图层进行正常的渲染 ，渲染用的名就是第二步，为属性起的名字。

​

​

父向子代码链接

子组件向父组件传递数据： $emit

技术：侦听触发事件来传递.

​ 触发事件

​ 侦听事件

例子：

 <button v-on:click="myclick">点击我</button>  

触发click 鼠标点击类型的事件

button 侦听对象

v-on:click 侦听click类型的事件

myclick 回调函数

原理：先触发鼠标点击事件，v-onclick侦听到，会进入myclick回调函数。

语言自带的事件:鼠标事件 ,键盘事件，表单事件 比较特殊 不是通过代码执行触发动作，而是通过用户操作实现触发

自定义的事件:我们可以自己定义一些事件：也一定要有这几个环节。

自定义事件流程：

​ 首先找一个自带事件的回调函数，里面写自定义事件。

​ 触发xxx事件的代码:----$emit

​ 侦听xx类型事件: — v-on

​ 自定义的回调函数 :-------func

子向父传值实际上用了自定义事件的方式传值。

子向父传值步骤 ：