Vue 3 - 组件 - 秒客网

文章目录

- 组件基础
- - 1、单文件组件
  - 2、加载组件
  - 3、组件的组织
- Props组件交互
- - Prop 类型
- 自定义事件组件交互
- 组件生命周期
- Vue引入第三方 (Swiper
- - 基础实现
  - 添加指示器

本文内容来自：/video/BV1Rs4y127j8/

组件基础

1、单文件组件

Vue 单文件组件（又名 *.vue 文件，缩写为 SFC）是一种特殊的文件格式，它允许将 Vue 组件的模板、逻辑与样式封装在单个文件中

<template>
    <h3>单文件组件</h3>
</template>

<script>
export default {
    name:"MyComponent"
}
</script>

<style scoped>
h3{
    color: red;
}
</style>

2、加载组件

第一步：引入组件 import MyComponentVue from './components/'

第二步：挂载组件 components: { MyComponentVue }

第三步：显示组件 <my-componentVue />

3、组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织

Props组件交互

组件与组件之间是需要存在交互的，否则完全没关系，组件的意义就很小了

Prop 是你可以在组件上注册的一些自定义 attribute

<my-componentVue title="标题"/>

<template>
    <h3>单文件组件</h3>
    <p>{{ title }}</p>
</template>

<script>
export default {
    name:"MyComponent",
    props:{
        title:{
            type:String,
            default:""
        }
    }
}
</script>

Prop 类型

Prop传递参数其实是没有类型限制的

数据类型为数组或者对象的时候，默认值是需要返回工厂模式

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function
}

自定义事件组件交互

自定义事件可以在组件中反向传递数据，prop 可以将数据从父组件传递到子组件，那么反向如何操作呢，就可以利用自定义事件实现 $emit

<template>
    <h3>单文件组件</h3>
    <button @click="sendHandle">发送数据</button>
</template>

<script>
export default {
    name: "MyComponent",
    methods:{
        sendHandle(){
            this.$emit("onCustom","数据")
        }
    }
}
</script>

<style scoped>
h3 {
    color: red;
}
</style>

<template>
  <my-componentVue @onCustom="getData" />
</template>

<script>

import MyComponentVue from './components/'

export default {
  name: 'App',
  components: {
    MyComponentVue
  },
  methods: {
    getData(data) {
      (data);
    }
  }
}
</script>

组件生命周期

每个组件在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

为了方便记忆，我们可以将他们分类：

创建时：beforeCreate、created
渲染时：beforeMount、mounted
更新时：beforeUpdate、updated
卸载时：beforeUnmount、unmounted

Vue引入第三方 (Swiper

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8bGdarGB-1689761542862)(imgs/)]

Swiper 开源、免费、强大的触摸滑动插件
是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端
能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果

Swiper 官方文档：/vue
安装指定版本:

npm instal --save swiper@8.1.6

基础实现

<template>
  <div class="hello">
    <swiper class="mySwiper">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';

export default {
  name: 'HelloWorld',
  components: {
    Swiper,
    SwiperSlide,
  }
}
</script>

添加指示器

<template>
  <div class="hello">
    <swiper class="mySwiper" :modules="modules" :pagination="{ clickable: true }">
      <swiper-slide>
        <img src="../assets/" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/" alt="">
      </swiper-slide>
      <swiper-slide>
        <img src="../assets/" alt="">
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';

export default {
  name: 'HelloWorld',
  data(){
    return{
      modules: [ Pagination ]
    }
  },
  components: {
    Swiper,
    SwiperSlide,
  }
}
</script>

2023-07-19

Vue 3 - 组件