05. 组件

组件注册

vue2中使用组件必须注册，但是vue3中如果是使用了语法糖setup，则不需要注册。如 ：

<template>
   <test/>
</template>
<script setup>
    import testfrom "@/components/test"
</script>

导入直接使用即可

组件之间的通信

父传子

父传子还是用v-bind和props，只不过props的写法有一点变化。例子：

父组件

<template>
  <div>
    <child :name="name" />
  </div>
</template>
<script setup>
import child from "./child.vue";
import { ref } from "vue";
const name = ref("tom");
</script>

子组件

<template>
  <div>{{ name }}</div>
</template>
<script setup>
const props = defineProps({
  name: {
    type: String,
    default: "",
  },
});
console.log(props.name);
</script>

子组件使用defineProps函数来定义props

子传父

子传父还是用自定义事件和emit，只不过emit的写法有一点变化。例子：

子组件件

<template>
  <div>{{ name }}</div>
</template>
<script setup>
import { ref } from "vue";
const name = ref("tom");
const emits = defineEmits(["getName"]);
emits("getName", name.value);
</script>

父组件

<template>
  <div>
    <child @getName="getName" />
  </div>
</template>
<script setup>
import child from "./child.vue";
const getName = (value) => {
  console.log(value);
};
</script>

使用defineEmits函数定义emit，参数是一个数组，数组中可存放多个emit事件。如 ：

const emits = defineEmits(["事件1", "事件2");
emits("事件1", "需要传递的数据");
emits("事件2", "需要传递的数据");

兄弟组件传值使用“mitt”

mitt又称事务总线，是第三方插件。

vue2使用 EventBus 进行组件通信，而vue3推荐使用 mitt.js。

优点

首先它足够小，仅有200bytes，其次支持全部事件的监听和批量移除，它还不依赖 Vue 实例，所以可以跨框架使用，React 或者 Vue，甚至 jQuery 项目都能使用同一套库。

安装

npm i mitt -S

使用例子

1、新建一个js

import mitt from 'mitt'
const emitter = mitt();
export default emitter ;

2、公共页面

<template>
  <div>
    <child1 />
    <child2 />
  </div>
</template>
<script setup>
import child1 from "./child1.vue";
import child2 from "./child2.vue";
</script>

3、两个子组件

child1.vue

<template>
  <div>child1</div>
</template>
<script setup>
import { onMounted } from "vue";
import emitter from "../../utils/index.js";
onMounted(() => {
  // 发送
  emitter.emit("getDetail", { name: "张三", age: 20 });
});
</script>

child2.vue

<template>
  <div>child2</div>
</template>
<script setup>
import emitter from "../../utils/index.js";
// 监听
emitter.on("getDetail", (val) => {
  console.log(val);
});
</script>

运行效果 ：

动态组件

<template>
  <div>
    <component :is="ComponentA" />
    <component :is="ComponentB" />
  </div>
</template>

<script setup>
import ComponentA from './components/ComponentA.vue'
import ComponentB from './components/ComponentB.vue'
</script>

异步组件

<template>
  <div>
    <component :is="ComponentA" />
  </div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue';

const ComponentA = defineAsyncComponent(()=>
  import("./components/ComponentA.vue")
)
</script>