首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3自定义组件

vue3学习笔记之自定义组件举例

2023-08-29 10:07:07 作者：是烤面包片呀？

这篇文章主要给大家介绍了关于vue3学习笔记之自定义组件的相关资料,组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,需要的朋友可以参考下

自定义组件，举个🌰:

1、封装自定义组件 CustomList.vue

<!-- src/components/CustomList.vue -->
<script lang="ts">
import type { IDataItem } from "../type/customlist";
// IProps 不能直接从外部导入，当前会报错，以后可能会支持（有人提了issue）
export interface IProps {
  title?: string;
  data: Array<IDataItem>;
}
</script>
<script setup lang="ts">
import { onMounted } from "vue";
// 声明一些属性，给父组件传值进来，并且给部分设置了默认值
const props = withDefaults(defineProps<IProps>(), {
  title: "CustomList",
});
// 抛出事件，供父组件使用
// const emit = defineEmits(["click-item"]);
const emit = defineEmits<{
  (e: "click-item", item: IDataItem, $event: Event): void;
}>();
const clickItem = function (item: IDataItem, e: Event) {
  // 可以在函数里执行完一些操作
  console.log("自定义组件点击了组件里面的item...", item, e);
  // 再抛出宏定义的事件
  emit("click-item", item, e);
};
onMounted(() => {
  console.log("CustomList onMounted...", props);
});
</script>
<template>
  <h1>{{ title }}</h1>
  <ul @click="$emit('click-ul', $event, 1)">
    <li @click="clickItem(item, $event)" v-for="item in data" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>
<style lang="less" scoped></style>

src 底下 type 文件夹中声明的 interface 接口文件

// src/type/customlist.d.ts
export interface IDataItem {
  name: string;
  id: number;
}

2、在 App.vue 中使用自定义组件 CustomList.vue

<!-- src/App.vue -->
<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeMount } from "vue";
import CustomList from "./components/CustomList.vue";
import type { IDataItem } from "./type/customlist";
// 声明一个data，传到自定义组件CustomList
const data = reactive([] as Array<IDataItem>);
const customListRef = ref<HTMLElement | null>(null);
// 点击了自定义组件的item，执行了自定义组件抛出宏定义事件并接收其携带过来的参数
const clickItem = function (item: string, e: Event) {
  console.log("clickItem...", item, e);
};
// 点击了自定义组件的ul在templete里面直接抛出的事件并接收其携带过来的参数
const clickUl = function (e: Event, value: number) {
  console.log("clickUl...", e, value);
};
onBeforeMount(() => {
  const list: Array<IDataItem> = [
    {
      name: "aaa",
      id: 1,
    },
    {
      name: "bbb",
      id: 2,
    },
  ];
  data.push(...list);
});
onMounted(() => {
  console.log("onMounted...", customListRef.value);
});
</script>
<template>
  <div class="content">
    <!-- 使用自定义组件CustomList -->
    <CustomList
      @click-ul="clickUl"
      @click-item="clickItem"
      :data="data"
      ref="customListRef"
    />
  </div>
</template>
<style scoped lang="less">
.content {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--colorTextNormal);
  padding: 50px;
}
</style>

一、组件注册

组件注册：https://cn.vuejs.org/guide/components/registration.html

1、全局注册

在 main.ts 中使用 app.component('MyComponent', MyComponent) 全局注册一个组件，可以在app内的任何地方使用。

缺点：

无法在生产打包时被自动移除 (也叫 tree-shaking )，即使它并没有被实际使用，它仍然会出现在打包后的 JS 文件中。
依赖关系不明显，出问题不易定位，用多了难维护

2、局部注册

在用到组件的地方 import 导入

<script setup>
import ComponentA from './ComponentA.vue'
</script>
<template>
  <ComponentA />
</template>

3、总结：非必要不实用全局注册

二、属性

父组件通过给子组件传递不同的属性数据控制子组件最终展示状态。

1、定义一个 props

通过 defineProps 宏定义一个属性

const props = defineProps(['title'])
console.log(props.title)

2、给 props添加类型并给定默认值

针对类型的 props/emit 声明

defineProps<IProps>() 可以给 props 设置类型，IProps 为 props 类型为组件的 props 标注类型

withDefaults 的第二个参数支持给 props 设置默认值使用类型声明时的默认 props 值

import type { IDataItem } from "../type/customlist";
// IProps 不能直接从外部导入，当前会报错，以后可能会支持（有人提了issue）
export interface IProps {
  title?: string;
  data: Array<IDataItem>;
}
const props = withDefaults(defineProps<IProps>(), {
  title: "CustomList",
});

3、 props只读，不可修改

组件内的 props 都是只读的，不能对其进行修改单向数据流

<script setup lang="ts">
import { onMounted } from "vue";
// 声明一些属性，给父组件传值进来，并且给部分设置了默认值
const props = withDefaults(defineProps<IProps>(), {
  title: "CustomList",
});
onMounted(() => {
    // ❎ 不能这么干，单向数据流 props 不可修改
    props.title = "改变了CustomList的title"
});
</script>

三、事件

子组件抛出内部事件并传递参数供父组件使用。

1、template 内使用 $emit 直接抛出一个事件

在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件并抛出相关参数，$emit('抛出的事件名', 需要传到父组件的参数一, 参数二...)。抛出事件名要用可以使用 camelCase 和 kebab-case 形式（建议 kebab-case ）。

<!-- MyComponent -->
<button @click="$emit('someEvent', $event, 1)">click me</button>

2、defineEmits() 宏来声明要触发的事件

在 <template> 中使用的 $emit 方法不能在组件的 <script setup> 部分中使用，相当于你不能对这个事件先做出一些处理然后再抛出，使用 defineEmits() 宏声明要触发的事件可以解决这个问题：

声明触发的事件

<script>
// 抛出事件，供父组件使用
const emit = defineEmits<{
  // (e: "抛出的事件名", 抛出的参数一, 参数二...)
  (e: "callback", $event: Event): void;
}>();
const callback = function (e: Event) {
  emit("callback", e);
};
</script>
<template>
  <button @click="callback($event, 111)">click me</button>
</template>

3、使用组件并监听子组件抛出的事件及参数

<script>
import MyComponent from "./components/MyComponent.vue";
const callback = function (e: Event, value) {
    console.log("callback...", e, value);
}
</script>
<template>
    <MyComponent @some-event="callback" />
</template>

四、插槽

可以在自定义组件内部指定的部位插入自定义内容，让组件更加灵活。

1、匿名插槽

组件内插入 <slot> 标签不指定 name 属性，默认只有一个，可以给插槽内添加默认值，父组件在使用组件时不传值的时候会展示默认内容，传值则会替换掉默认内容。

<!-- 子组件 SubmitButton -->
<button type="submit">
  <slot>这里是默认内容文本</slot>
</button>
<!-- 使用 SubmitButton (不传值) ，按钮内部显示【这里是默认内容文本】-->
<SubmitButton />
<!--  使用 SubmitButton (传值) ，按钮内部显示【Save】-->
<SubmitButton>Save</SubmitButton>

2、具名插槽

组件内插入 <slot> 标签时加上一个 name 属性，区分不同的插槽，可以有多个。

<slot name="header"></slot>

3、具名作用域插槽

感觉跟具名插槽就是同一个东西，就是可以从子组件带参数过来，只能在指定的插槽里面用。

<!-- 子组件 MyComponent -->
<template>
    <slot name="header" message="hello header"></slot>
    <slot message="hello default"></slot>
    <slot name="footer" message="hello footer"></slot>
</template>
<!-- 父组件 -->
<!-- headerProps, defaultProps, footerProps 是一个对象 ，返回以对应 slot 上 { 属性: 属性值 } 形式的数据 -->
<MyComponent>
  <template #header="headerProps">
    {{ headerProps.message }}
  </template>
  <template #default="defaultProps">
    {{ defaultProps.message }}
  </template>
  <template #footer="footerProps">
    {{ footerProps.message }}
  </template>
  <!-- 解构取值的 🌰 -->
   <template #footer="{ message }">
    {{ message }}
  </template>
</MyComponent>

五、封装一个组件注意

1、组件编码规范

使用 PascalCase 形式的组件名称，提高了模板的可读性，方便区分 vue component 和原生 HTML DOM 组件名格式
给事件命名可以使用 camelCase 和 kebab-case (短横线连字符) 形式，使用时用 kebab-case (短横线连字符) 形式，使用 camelCase 并没有太多优势，推荐更贴近 HTML 的 kebab-case 书写风格。

DOM 模板解析注意事项
 传递 prop 的细节

2、可复用性

组件内部样式可覆盖，尽可能不要写死，提供参数去修改
组件内部页面展示更加灵活，在合适的地方提供插槽，让组件内布局可控、更加灵活

总结

到此这篇关于vue3学习笔记之自定义组件的文章就介绍到这了,更多相关vue3自定义组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！