Vue的学习 —— ＜vue组件＞

目录

前言

正文

一、选项式API与组合式API

二、生命周期函数

 1、onBeforeMount()

2、onMounted()

3、onBeforeUpdate()

4、onUpdated()

5、onBeforeUnmount()

6、onUnmounted()

三、组件之间的样式冲突

四、父组件向子组件传递数据

1、定义props

2、静态绑定props

3、动态绑定props

4、校验props

① 基本类型检查

② 必填项的校验

③ 属性默认值

④ 自定义验证函数

5、子组件向父组件传递数据

① 子组件向父组件传递自定义事件

② 在子组件中触发自定义事件

③ 在父组件中监听自定义事件

---

前言

在学习完第三章的基础知识后，已经可以编写一些简单的组件了，但是这样的组件功能比较简单，无法满足实际项目开发中各种复杂的需求。为了能够更灵活地使用组件，还需要更深入地学习组件的相关知识。

正文

一、选项式API与组合式API

Vue 3支持选项式API和组合式API。其中，选项式API是从Vue 2开始使用的一种写法，而Vue 3新增了组合式API的写法。选项式API是一种通过包含多个选项的对象来描述组件逻辑的API，其常用的选项包括data、methods、computed、watch等。组合式API相比于选项式API，组合式API是将组件中的数据、方法、计算属性、侦听器等代码全部组合在一起，写在setup()函数中。

选项式API写法如下：

<script>
export default {
  data() {
    return { // 定义数据 }
  },
  methods: { // 定义方法 },
  computed: { // 定义计算属性 },
  watch: { // 定义侦听器 }
}
</script>

组合式API写法如下：

<script>
import { computed, watch } from 'vue'
export default {
  setup() {
    const 数据名 = 数据值
    const 方法名 = () => {}
    const 计算属性名 = computed(() => {})
    watch(侦听器的来源, 回调函数, 可选参数)
    return { 数据名, 方法名, 计算属性名 }
  }
}
</script>

Vue提供的选项式API和组合式API这两种写法可以覆盖大部分的应用场景，它们是同一底层系统所提供的两套不同的接口。选项式API是在组合式API的基础上实现的。

二、生命周期函数

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

Vue生命周期如下图所示：

• 以下将在 vite 创建的工程中，举例说明生命周期函数

• beforecate和created，它们已经被setup方法本身所取代

• 以下钩子都应该在组件的 setup() 阶段被同步调用

 1、onBeforeMount()

作用：在组件被挂载之前被调用。（获取不到 DOM 元素）

描述：当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。

2、onMounted()

作用：在组件挂载完成后执行。（可以获取到DOM 元素）

描述：组件在以下情况下被视为已挂载：

• 其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)。

• 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。

这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端执行。一般在这里进行数据网络请求操作

下面演示onMounted()函数的用法：

1. 创建src\components\onMountedDemo.vue文件用于存放演示代码，写入如下代码：

   <script setup>
   import { onBeforeMount, onMounted } from "vue";
   ​
   console.log('setup')
   ​
   onBeforeMount(() => {
     console.log('onBeforeMount —— 组件挂载前执行')
   })
   ​
   onMounted(() => {
     console.log('onMounted —— 组件挂载后执行')
   })
   ​
   </script>

2. 修改src\main.js文件，切换页面中显示的组件

   import App from './components/onMountedDemo.vue'

3. 保存代码，使用浏览器访问http://127.0.0.1:5173/，打开开发者控制台，页面效果如下图所示：

   

3、onBeforeUpdate()

作用：在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

描述：这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。

4、onUpdated()

作用：在组件因为响应式状态变更而更新其 DOM 树之后调用。

描述：

• 父组件的更新钩子将在其子组件的更新钩子之后调用。

• 这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。

下面演示以上钩子的使用方法：

1. 创建src\components\onMountedDemo.vue文件用于存放演示代码，写入如下代码：

   <template>
     <div>
       <h2>count 计数为：{{count}}</h2>
       <button @click="count++">点击 + 1</button>
     </div>
   </template>
   ​
   <script setup>
   import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref } from "vue";
   ​
   const count = ref(0)
   ​
   console.log('setup')
   // 1
   onBeforeMount(() => {
     console.log('onBeforeMount —— 组件挂载前执行')
   })
   // 2
   onMounted(() => {
     console.log('onMounted —— 组件挂载后执行')
     console.log('===============================================')
   })
   ​
   // 3
   onBeforeUpdate(() => { 
     console.log('onBeforeUpdate —— 数据更新前调用')
   })
   // 4
   onUpdated(() => {
     console.log('onUpdated —— 数据更新后调用')
   })
   ​
   </script>

2. 修改src\main.js文件，切换页面中显示的组件

   import App from './components/onUpdated.vue'

3. 保存代码，使用浏览器访问http://127.0.0.1:5173/，打开开发者控制台，点击页面上的“点击 + 1” 按钮，页面效果如下图所示：

   

5、onBeforeUnmount()

作用：组件内实例被卸载之前调用

描述：当这个钩子被调用时，组件实例依然还保有全部的功能。

6、onUnmounted()

作用：在组件实例被卸载之后调用

描述：一个组件在以下情况下被视为已卸载：

• 其所有子组件都已经被卸载。

• 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。

可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。

以上钩子代码示例：

App.vue组件中，通过 v-if 指令，控制 Hello.vue 组件的显示隐藏，来模拟组件的挂载/卸载，

下面演示卸载生命周期的用法：

1. 创建src\components\unInstall.vue文件用于存放演示代码，写入如下代码：

   <template>
       <div>
         <h2>uninstall 组件</h2>
       </div>
     </template>
     
     <script setup>
     import { onBeforeUnmount, onUnmounted } from "vue";
   ​
     onBeforeUnmount(() => {
       console.log('onBeforeUnmount —— 组件卸载前执行')
     })
   ​
     onUnmounted(() => {
       console.log('onUnmounted —— 组件卸载后执行')
     })
     
     </script>

2. 在src/components/App.vue文件中显示上面创建的unInstall.vue组件，代码如下：

   <template>
     <div>
       <h2>count 计数为：{{count}}</h2>
       <button @click="count++">点击 + 1</button>
       <hr>
   ​
       <unInstall v-if="display"/>
       <button @click="display=!display">挂载/卸载unInstall组件</button>
   ​
     </div>
   </template>
   ​
   <script setup>
   import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref } from "vue";
   import unInstall from './components/unInstall.vue'
   ​
   const count = ref(0)
   const display = ref(true)
   ​
   console.log('setup')
   // 1
   onBeforeMount(() => {
     console.log('onBeforeMount —— 组件挂载前执行')
   })
   // 2
   onMounted(() => {
     console.log('onMounted —— 组件挂载后执行')
     console.log('===============================================')
   })
   ​
   // 3
   onBeforeUpdate(() => { 
     console.log('onBeforeUpdate —— 数据更新前调用')
   })
   // 4
   onUpdated(() => {
     console.log('onUpdated —— 数据更新后调用')
     console.log('===============================================')
   })
   ​
   </script>

3. 修改src\main.js文件，切换页面中显示的组件

   import App from './App.vue'

4. 保存代码，使用浏览器访问http://127.0.0.1:5173/，打开开发者控制台，点击页面上的“挂载/卸载unInstall组件” 按钮，页面效果如下图所示：

   

三、组件之间的样式冲突

在默认情况下，写在Vue组件中的样式会全局生效，很容易造成多个组件之间的样式冲突问题。例如，为Component1组件中的h5元素添加边框样式，其他组件则不添加，同时显示在页面上。具体代码如下：

<!-- Component1 -->
<template>
    <h5>组件1</h5>
</template>
<style>
h5 {
    border: 1px dotted black;
}
</style>
<!-- Component2 -->
<template>
    <h5>组件2</h5>
</template>
<!-- Component3 -->
<template>
    <h5>组件3</h5>
</template>
<!-- App.vue --> 
<template>
  <div>
    <Componet1/>
    <Componet2/>
    <Componet3/>
  </div>
</template>
<script setup>
import Componet1 from './components/Componet1.vue';
import Componet2 from './components/Componet2.vue';
import Componet3 from './components/Componet3.vue';
</script>

在main.js切换App.vue显示，保存代码后，使用浏览器访问http://localhost:5173/，页面效果如下：

从上图可以看出，Component1组件、Component2组件和Component3组件中h5元素的边框样式都发生了改变，但是代码中只有Component1组件设置了边框样式效果，说明组件之间存在样式冲突。

导致组件之间会产生样式冲突的原因：

导致组件之间样式冲突的根本原因是：在单页Web应用中，所有组件的DOM结构都是基于唯一的index.html页面进行呈现的。每个组件中的样式都可以影响整个页面中的DOM元素。在Vue中可以使用scoped属性和深度选择器来解决组件之间的样式冲突。Vue为<style>标签提供了scoped属性，用于解决组件之间的样式冲突。

为<style>标签添加scoped属性后，Vue会自动为当前组件的DOM元素添加一个唯一的自定义属性（如data-v-7ba5bd30），并在样式中为选择器添加自定义属性（如.list[data-v-7ba5bc90]），从而限制样式的作用范围，防止组件之间的样式冲突问题。

下面演示scoped属性的使用：

1. 修改Componet1组件的内容，修改后的完整代码如下：

   <template>
       <h5>组件1</h5>
   </template>
   <style scoped>
   h5 {
       border: 1px dotted black;
   }
   </style>

2. 保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，页面效果如下图所示：

   

3. 打开开发者控制台，切换到元素面板，可以看到当<style>标签添加scoped属性后，h5元素和相应的选择器被Vue自动添加了data-v-428f8930属性，从而解决了样式冲突的问题。

   

四、父组件向子组件传递数据

1、定义props

若想实现父组件向子组件传递数据，需要先在子组件中声明props，表示子组件可以从父组件中接收哪些数据。在不使用setup语法糖的情况下，可以使用props选项声明props。props选项的形式可以是对象或字符串数组。声明对象形式的props的语法格式如下：

<script>
export default {
  props: {
    自定义属性A: 类型,
    自定义属性B: 类型,
    ……
  }
}
</script>

如果不需要限制props的类型，可以声明字符串数组形式的props，示例代码如下：

props: ['自定义属性A', '自定义属性B'],

当使用setup语法糖时，可使用defineProps()函数声明props，语法格式如下：

<script setup>
const props = defineProps({'自定义属性A': 类型}, {'自定义属性B': 类型})
</script>

使用defineProps()函数声明字符串数组形式的props，语法格式如下：

const props = defineProps(['自定义属性A', '自定义属性B'])

在组件中声明了props后，可以直接在模板中输出每个prop的值，语法格式如下：

<template> 
  {{ 自定义属性A }}
  {{ 自定义属性B }}
</template>

2、静态绑定props

当在父组件中引用了子组件后，如果子组件中声明了props，则可以在父组件中向子组件传递数据。如果传递的数据是固定不变的，则可以通过静态绑定props的方式为子组件传递数据。如果子组件中未声明props，则父组件向子组件中传递的数据会被忽略，无法被子组件使用。

通过静态绑定props的方式为子组件传递数据，其语法格式如下：

<子组件标签名 自定义属性A="数据" 自定义属性B="数据" />

在上述语法格式中，父组件向子组件的props传递了静态的数据，属性值默认为字符串类型。

下面演示父组件向子组件传递数据的方法：

1. 创建src\components\Count.vue文件，用于展示子组件的相关内容，文件代码如下：

   <template>
     初始值为：{{ num }}
   </template>
   <script setup>
   const props = defineProps({
     num: String
   })
   </script>

2. 创建src\components\Props.vue文件，用于展示父组件的相关内容，文件代码如下：

   <template>
     <Count num="1" />
   </template>
   <script setup>
   import Count from './Count.vue'
   </script>

3. 修改src\main.js文件，切换页面中显示的组件

   import App from './components/Props.vue'

4. 保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，父组件向子组件中传递数据的页面效果如下图所示：

3、动态绑定props

在父组件中使用v-bind可以为子组件动态绑定props，任意类型的值都可以传给子组件的props，包括字符串、数字、布尔值、数组、对象等。

从父组件中为子组件传递字符串类型的props数据，示例代码如下：

<template>
  <Child :init="username" />
</template>
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'
const username = ref('小红')
</script>

上述代码用到了名称为Child的子组件，该子组件的示例代码如下：

<template></template>
<script setup>
const props = defineProps(['init'])
console.log(props)
</script>

在Vue中，所有的props都遵循单向数据流原则，props数据因父组件的更新而变化，变化后的数据将向下流往子组件，而且不会逆向传递，这样可以防止因子组件意外变更props导致数据流向难以理解的问题。 ​ 每次父组件绑定的props发生变更时，子组件中的props都将会刷新为最新的值。开发者不应该在子组件内部改变props，如果这样做，Vue会在浏览器的控制台中发出警告。

4、校验props

在封装组件时，可以在子组件中对从父组件传递过来的props数据进行合法性校验，从而防止出现数据不合法的问题。

使用字符串数组形式的props的缺点是无法为每个prop指定具体的数据类型，而使用对象形式的props的优点是可以对每个prop进行数据类型的校验。对象形式的props可以使用多种验证方案，包括基础类型检查、必填项的校验、属性默认值、自定义验证函数等。在声明props时，可以添加验证方案。

① 基本类型检查

在开发中，有时需要对从父组件中传递过来的props数据进行基础类型检查，这时可以通过type属性检查合法的类型，如果从父组件中传递过来的值不符合此类型，则会报错。 ​ 常见的类型有String（字符串）、Number（数字）、Boolean（布尔值）、Array（数组）、Object（对象）、Date（日期）、Function（函数）、Symbol（符号）以及任何自定义构造函数。

为props指定基础类型检查，示例代码如下：

props: {
  自定义属性A: String,       // 字符串
  自定义属性B: Number,       // 数字
  自定义属性C: Boolean,      // 布尔值
  自定义属性D: Array,        // 数组
  自定义属性E: Object,       // 对象
  自定义属性F: Date,         // 日期
  自定义属性G: Function,         // 函数
  自定义属性H: Symbol,       // 符号
}

通过配置对象的形式定义验证规则，示例代码如下：

props: {
  自定义属性: { type: Number },
}

如果某个prop的类型不唯一，可以通过数组的形式为其指定多个可能的类型，示例代码如下:

props: {
  自定义属性: { type: [String, Array] },   // 字符串或数组
}

② 必填项的校验

父组件向子组件传递props数据时，有可能传递的数据为空，但是在子组件中要求该数据是必须传递的。此时，可以在声明props时通过required属性设置必填项，强调组件的使用者必须传递属性的值，示例代码如下：

props: {
  自定义属性: { required: true },
}

③ 属性默认值

在声明props时，可以通过default属性定义属性默认值，当父组件没有向子组件的属性传递数据时，属性将会使用默认值，示例代码如下：

props: {
  自定义属性: { default: 0 },
}

④ 自定义验证函数

如果需要对从父组件中传入的数据进行验证，可以通过validator()函数来实现。validator()函数可以将prop的值作为唯一参数传入自定义验证函数，如果验证失败，则会在控制台中发出警告。为prop属性指定自定义验证函数的示例代码如下：

props: {
  自定义属性: {
    validator(value) {
      return ['success', 'warning', 'danger'].indexOf(value) !== -1;
    },
  },
}

5、子组件向父组件传递数据

父子组件的关系可以总结为 prop 向下传递，emit事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件emit给父组件发送消息。

① 子组件向父组件传递自定义事件

若想使用自定义事件，首先需要在子组件中声明自定义事件。在不使用setup语法糖时，可以通过emits选项声明自定义事件，示例代码如下：

<script>
export default {
  emits: ['demo']
}
</script>

在使用setup语法糖时，需要通过调用defineEmits()函数声明自定义事件，示例代码如下：

<script setup>
const emit = defineEmits(['demo'])
</script>

② 在子组件中触发自定义事件

在子组件中声明自定义事件后，接着需要在子组件中触发自定义事件。当使用场景简单时，可以使用内联事件处理器，通过调用$emit()方法触发自定义事件，将数据传递给使用的组件，示例代码如下：

<button @click="$emit('demo', 1)">按钮</button>

在上述代码中，$emit()方法的第1个参数为字符串类型的自定义事件的名称，第2个参数为需要传递的数据，当触发当前组件的事件时，该数据会传递给父组件。

除了使用内联方式外，还可以直接定义方法来触发自定义事件。在不使用setup语法糖时，可以从setup()函数的第2个参数（即setup上下文对象）来访问到emit()方法，示例代码如下：

export default {
  setup(props, ctx) {
    const update = () => {
      ctx.emit('demo', 2)
    }
    return { update }
  }
}

如果使用setup语法糖，可以调用emit()函数来实现，示例代码如下：

<script setup>
const update = () => {
  emit('demo', 2)
}
</script>

③ 在父组件中监听自定义事件

在父组件中通过v-on可以监听子组件中抛出的事件，示例代码如下：

<子组件名 @demo="fun" />

在上述代码中，当触发demo事件时，会接收到从子组件中传递的参数，同时会执行fun()方法。父组件可以通过value属性接收从子组件中传递来的参数。在父组件中定义fun()方法，示例代码如下：

const fun = value => {
  console.log(value)
}

下面演示向父组件传递数据的使用方法：

1. 创建src\components\CustomSubComponent.vue文件，用于展示子组件的相关内容。子组件代码如下：

   <template>
     <p>count值为：{{ count }}</p>
     <button @click="add">加n</button>
   </template>
   <script setup>
   import { ref } from 'vue'
   const emit = defineEmits(['updateCount'])
   const count = ref(1)
   // 自身count + 1,向父组件传值为2
   const add = () => {  count.value++ 
     emit('updateCount', 2) }
   </script>

2. 创建src\components\CustomEvents.vue文件，用于展示父组件的相关内容。父组件代码如下：

   <template>
     <p>父组件当前的值为：{{ number }}</p>
     <CustomSubComponent @updateCount="updateEmitCount" />
   </template>
   <script setup>
   import CustomSubComponent from './CustomSubComponent.vue'
   import { ref } from 'vue'
   const number = ref(10)
   const updateEmitCount = (value) => {  number.value += value }
   </script>

3. 修改src\main.js文件，切换页面中显示的组件。

   import App from './components/CustomEvents.vue'

4. 保存上述代码后，在浏览器中访问http://127.0.0.1:5173/，初始页面效果如下图所示：

   

5. 单击“加n”按钮后的页面效果如下图所示：