Vue(3) 组件

文章目录

对组件的理解
单文件组件
非单文件组件
- 基本使用
- 几个注意点
- 组件的嵌套
- VueComponent构造函数
- 一个重要的内置关系
组件的自定义事件
全局事件总线
安装全局事件总线
使用事件总线
解绑事件
消息订阅与发布
- 简介
- 使用步骤
- 范例
$nextTick
插槽
- 1.默认插槽
- 2.具名插槽
- 作用域插槽

对组件的理解

在这里插入图片描述

单文件组件

一个文件中包含一个组件
暴露一般选择默认暴露

export { school }  //import {？？？} from ？？？
export default school;//import ？？？ from ？？？

<template><!-- 组件的结构 --><div class="demo"><h2>学校名称：{{ name }}</h2><h2>学校地址：{{ address }}</h2><button @click="showName"></button></div>
</template>
<script>
//组件交互相关的代码（数据方法等）// 第三种暴露方式（推荐）
export default {name: "School",data() {return {name: "尚硅谷",address: "背景昌平",};},methods: {showName() {console.log(this.name);},},
};
// 第一种方式
// export { school };
// 第二种方式
// export default school;
</script>
<style lang="" scoped>
/* 组件的样式 */
.demo {background-color: skyblue;
}
</style>

非单文件组件

一个文件中包含n个组件

基本使用

Vue使用组件的三大步骤：
一、定义组件（创建组件）
二、注册组件
三、使用组件（写组件标签）
一、如何定义一个组件
使用Vue.extend(options)创建其中 options 和new Vue (options）时传入的那个几乎一样，但也有点区别；
区别如下：
1.el 不要写，为什么？——最终所有组件都要经过一个vm管理，由vm中的el决定服务哪个容器
2.data必须写成函数，为什么？——避免组件被复用时，数据存在引用关系
备注：使用template可以配置组件结构
二、如何注册组件？
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component（‘组件名’，组件）
三、编写组件标签 :

<body><div id="root"><h1>{{msg}}</h1><hr /><!-- 第三步：编写组件标签 --><school-info></school-info><hr /><student></student></div>
</body><script type="text/javascript">// 第一步：创建school组件const school = Vue.extend({name:'atGuiGu', //在开发者工具的时候如果有name配置项则显示该项的名字，没有就显示注册组件时定义的名字template: `<div><h2>学校名称：{{schoolName}}</h2><h2>学校地址：{{address}}</h2><button @click="showName">点我提示学校名</button></div>`,// el: "#root", //组件定义时，不要写el配置项，因为最终的组件都要被一个vm管理，由vm决定服务于哪个容器。data() {return {schoolName: "尚硅谷",address: "背景昌平",};},methods: {showName() {alert(this.schoolName);},},});// 第一步：创建student组件const student = Vue.extend({template: `<div><h2>学生姓名：{{studentName}}</h2><h2>学生年龄：{{age}}</h2></div>`,data() {return {studentName: "张三",age: 18,};},});// 第一步：创建hello组件const hello = Vue.extend({template: `<div><h2>{{msg}}</h2></div>`,data() {return {msg: "你好啊",};},});// 创建全局组件，全局注册Vue.component("hello", hello);const vm = new Vue({el: "#root",data: {msg: "hello",},// 第二步：注册组件（局部注册）components: {"school-info": school,student,},});</script>

几个注意点

1.关于组件名：
一个单词组成：
第一种写法（首字母小写） school
第二种写法（首字母大写） School
多个单词组成：
第一种写法（kebab-case命名）：my-school
第二种写法（CamelCase命名）：MySchool（需要Vue脚手架的支持）
备注：
（1）组件名尽可能回避HTML中已有的元素名称，例如：h2，H2都不行
（2）可以使用name配置项指定组件在开发者工具中呈现的名字
2.关于组件标签
第一种写法：
第二种写法：
备注：不用使用脚手架时，会导致后续组件不能渲染
3.一个简写方式
const school=Vue.extend(options) 可简写为：const school =options

组件的嵌套

<body><!-- 页面上并不会出现<div id="root"></div>，会直接显示app的内容 --><div id="root"></div></body><script type="text/javascript">//   定义student组件const student = Vue.extend({template: `<div><h2>学生姓名：{{studentName}}</h2><h2>学生年龄：{{age}}</h2></div>`,data() {return {studentName: "张三",age: 18,};},});//定义school组件const school = Vue.extend({template: `<div><h2>学校名称：{{schoolName}}</h2><h2>学校地址：{{address}}</h2><student></student></div>`,// el: "#root", //组件定义时，不要写el配置项，因为最终的组件都要被一个vm管理，由vm决定服务于哪个容器。data() {return {schoolName: "尚硅谷",address: "背景昌平",};},components: {student,},});// 定义hello组件const hello = Vue.extend({template: `<div><h2>{{msg}}</h2></div>`,data() {return {msg: "你好啊",};},});// 定义app组件const app = Vue.extend({template: `<div><hello></hello><school></school></div>`,components: {school,hello,},});const vm = new Vue({el: "#root",template: `<app></app>`,data: {msg: "hello",},// 第二步：注册组件（局部注册）components: {app,},});</script>

VueComponent构造函数

关于VueComponent
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
2.我们只需要写或 Vue解析时会帮我们创建school组件的实例对象
即Vue帮我们执行的：new Component(options)
每写一个，就会创建一次实例对象
3.特别注意：每次调用Vue.extend 返回的都是一个全新的VueComponent
4.关于this指向：
（1）组件配置中：
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】
（2） new Vue（options）配置中：
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】
5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）
Vue的实例对象，以后简称vm
vc和vm有人说可以画等号，但是还是有一定区别的比如 vm中可以有el 但是vc中没有

一个重要的内置关系

一个重要的内置关系：VueComponent.prototype.proto===Vue.prototype
为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性和方法

在这里插入图片描述

组件的自定义事件

1.一种组件间的通信方式适用于：子组件==>父组件
2.使用场景：子想给父传数据那么就要在父中给子绑定自定义事件（事件的回调在父中）
3.绑定自定义事件

第一种方式：在父组件中：<Demo @atguigu=“test” />或<Demo v-on：atguigu=“test” />

App.vue
在这里插入图片描述

理解：在组件上绑定一个事件atguigu 回调函数是getStudentName

第二种方式：在父组件中：< Demo ref=“xxx”>

App.vue
在这里插入图片描述

若想让自定义事件只能触发一次，可以使用once修饰符（@guigu.once），或$once方法

4.触发自定义事件

this.$emit('atguigu',数据)

注意：父组件绑定的自定义事件名和子组件的$emit(XXX)名字相同
上方绑定自定义事件的两种方式的触发方法均如图
在这里插入图片描述

理解：1.子组件点击按钮后触发sendStudentName
2.触发Student身上的自定义事件atguigu （ $e mi t ），执行 g e tSt u d e n tN am e 函数 3.$ emit中的this.name的值传递给父组件中的函数getStudentName

5.解绑自定义事件

this.$off('atguigu)

6.组件上也可以绑定原生DOM事件需要使用native修饰符
组件上如果直接写@click 等操作DOM的事件，Vue会认为是自定义事件，并不是内置事件，如果想要组件上绑定内置事件如click等需要 @click.native

7.注意：通过this. $re f s . xxx .$ on(‘atguigu’，回调) 绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题
原因：
如果在mounted中使用普通函数,this指向指的是调用的人（student组件）
因此使用箭头函数，箭头函数没有this 会自动向父级寻找，即mouted函数的this 即app

App.vue
配置在methods中
在这里插入图片描述
箭头函数（在mouted中）

全局事件总线

一种组件间的通信方式：适用于任意组件间的通信
在这里插入图片描述
要想有全局事件，必须所有vm vc都能看到所以需要在某个的原型上添加

在这里插入图片描述
但是不能在Vuecomponent.prototype上添加，因为每创建一个不同的组件都是一个全新的vueComponent 没办法固定，因此就需要在Vue的原型对象上添加

安装全局事件总线

在这里插入图片描述

使用事件总线

例子：Student组件给school组件发送数据
1.接受数据：A组件想接受数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身
法一：在mouted中绑定自定义事件，并将函数写在mounted中（使用箭头函数)

在这里插入图片描述
法二：在methods中把回调函数写好，再在mouted中调用

2.提供数据
B组件触发事件并传递数据

解绑事件

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件
在这里插入图片描述

之前自定义事件中不用解绑是因为是直接在Student身上定义的自定义事件，如果该组件销毁，那么自定义事件也会随之销毁
但是全局事件不同，全局事件是在一个总的$bus上定义的一个事件，就算组件没了，但是bus还在，定义的自定义事件还在bus上

消息订阅与发布

在这里插入图片描述
需要数据的组件来订阅消息，有数据的发布消息
A组件订阅的消息（名为demo），函数是test 发布消息的人发布后，test执行
C组件发布消息（名为Demo）发布的数据是666 数据以参数的形式传给test

在这里插入图片描述

简介

一种组件通信的方式，适用于任意组件的通信

使用步骤

1.安装pubsub

  npm i pubsub-js

2.引入

import pubsub from "pubsub-js";

3.接受数据
至少两个参数：消息名，数据1

A组件想接受数据，则在A组件中订阅消息，订阅的回调留在A组件自身
法一：将函数写在methods
在这里插入图片描述
法二：直接在mouted中写回调函数（使用箭头函数）

使用箭头函数的原因: 因为普通函数，调用者是pubsub，是第三方库，this是undefined 箭头函数的this是vc

4.提供数据

pubsub.publish('xxx’,数据)

5.取消订阅
最好在beforeDestroy钩子中，用pubsub.unsubscribe(this.pubid); 去取消订阅
传入的参数是订阅的id

范例

在这里插入图片描述

$nextTick

1.语法:this.$nextTick(回调函数)
2.作用：在下一次DOM更新结束后执行其指定的回调
3.什么时候用：当改变数据后，要基于更新后的DOM进行某些操作时，要在nextTick所指定的回调函数中执行

插槽

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方法
适用于：父组件==>子组件

分类：默认插槽具名插槽作用域插槽

迷之总结hhh

默认插槽：我（子）挖坑，你（父）填土；具名插槽：我（子）挖坑，你（父）填土，我（子）再取个坑名；作用域插槽，我（子）挖坑，你（父）填土，我（子）在顺便给自己加点土
使用方式

1.默认插槽

在这里插入图片描述
Category.vue

<template><div class="categroy"><h3>{{ title }}分类</h3><!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --><slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot></div>
</template><script>
export default {name: "Category",props: ["title"],
};
</script><style lang="scss" scoped>
...
</style>

App.vue

<template><div class="container"><Category title="美食"><img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" /></Category><Category title="游戏"><ul><li v-for="g in games">{{ g }}</li></ul></Category><Category title="电影"><video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video></Category></div>
</template><script>import Category from "./components/Category.vue";export default {name: "App",components: { Category },data() {return {foods: ["火锅", "烧烤", "小龙虾", "牛排"],games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],films: ["《教父》", "拆弹专家", "《你好李焕英》", "《尚硅谷》"],};},};
</script>
<style lang="scss" scoped>...
</style>

2.具名插槽

在这里插入图片描述
App.vue

<template><div class="container"><Category title="美食"><imgslot="center"src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg"alt=""/><a slot="footer" href="http://www.atguigu.com">更多美食</a></Category><Category title="游戏"><ul slot="center"><li v-for="g in games">{{ g }}</li></ul><div slot="footer" class="foot"><a href="http://www.atguigu.com">单机游戏</a><a href="http://www.atguigu.com">网络游戏</a></div></Category><Category title="电影"><videoslot="center"src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video><template slot="footer"><div class="foot"><a href="http://www.atguigu.com">经典</a><a href="http://www.atguigu.com">热门</a><a href="http://www.atguigu.com">推荐</a></div></template></Category></div>
</template><script>
import Category from "./components/Category.vue";export default {name: "App",components: { Category },data() {return {foods: ["火锅", "烧烤", "小龙虾", "牛排"],games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],films: ["《教父》", "拆弹专家", "《你好李焕英》", "《尚硅谷》"],};},
};
</script>
<style lang="scss" scoped>
...
</style>

Category.vue

<template><div class="categroy"><h3>{{ title }}分类</h3><!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） --><slot name="center">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot><slot name="footer">我是一些默认值，当使用者没有传递具体结构时，我会出现</slot></div>
</template><script>
export default {name: "Category",props: ["title"],
};
</script><style lang="scss" scoped>
...
</style>