这是我参与「第五届青训营」伴学笔记创作活动的第 8 天

Vue3组件化

一、事件定义

1、定义组件的时候使用驼峰命名法定义事件名，比如在MyComponent中

emit('someEvent')

2、在使用组件的时候，使用肉串方式使用

<MyComponent @some-event="callback" />

二、透传特性

1、在vue3中，那些没有明确在组件props和emits中声明的特性或事件监听器称为透传特性，以前叫做非属性特性。比如class、style、id等等。当组件只有单根时，透传特性自动被添加到根元素上作为其特性。归到$attr里，以class为例

<MyButton class="large"></MyButton>

class透传到组件内

<button class="large">按钮</button>

2、不想自动继承怎么办，在组件内添加一个新的script

<script>
export default {
    inheriAttrs: false
  }
</script>

3、怎么获取所有透传特性？使用useAttrs

import { useAttrs } from 'vue'
const attrs = useAttrs()

三、提供/注入：provide/inject

1、隔代传惨时，使用provide/inject这组API，不推荐使用pinia、vuex进行状态管理

2、使用

祖代提供数据，传给后代第一个参数是key 第二个参数是值

provide('key', 'value')

在后代中，使用inject注入数据第一个参数是key 第二个参数是如果没有传进来值就给一个default默认值

inject('key', 'default')

四、Composables

1、利用Composables API封装的可复用状态逻辑称为Composables，类似于react当中的hooks

约定composables函数命名时加上use前缀

2、例子：unrefs

如果参数是 ref，则返回内部值，否则返回参数本身。

这是 val = isRef(val) ? val.value : val 计算的一个语法糖。

function useFoo(x: number | Ref<number>) {
  const unwrapped = unref(x)
  // unwrapped 现在保证为 number 类型
}

五、组件通信

1、props

Props方式是Vue中最常见的一种父传子的一种方式，使用也比较简单。

根据上面的demo，我们将数据以及对数据的操作定义在父组件，子组件仅做列表的一个渲染；

父组件代码如下：

<child-components :list="list"></child-components>

子组件只需要对父组件传递的值进行渲染即可，代码如下：

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
</script>

2、emit

emit方式也是Vue中最常见的组件通信方式，该方式用于子传父；

根据上面的demo，我们将列表定义在父组件，子组件只需要传递添加的值即可。

子组件代码如下：

<script setup>
import { ref, defineEmits } from 'vue'
const value = ref('')
const emits = defineEmits(['add'])
const handleSubmit = () => {
  emits('add', value.value)
}
</script>

在子组件中点击【添加】按钮后，emit一个自定义事件，并将添加的值作为参数传递。