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="美食">
      <img
        slot="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="电影">
      <video
        slot="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>