导入/注册组件

首先将你需要抽象出来的组件和逻辑拿出来，写成组件。需要的时候导入/注册。导入和注册有两种方法：全局注册和局部注册

局部注册

子组件ChildComp导入后可以直接使用，无需注册。

<script setup>
import ChildComp from './ChildComp.vue'
</script>

<template>
  <ChildComp />
</template>

全局注册

全局组件在vue全局中都可用，可以在任意组件和模板中使用

import MyComponent from './App.vue' 
app.component('MyComponent', MyComponent)
//可以被链式调用
app 
.component('ComponentA', ComponentA) 
.component('ComponentB', ComponentB) 
.component('ComponentC', ComponentC)

使用

<!-- 这在当前应用的任意组件中都可用 --> 
<ComponentA/> 
<ComponentB/>
<ComponentC/>

数据传递props

子组件中，使用defineProps声明从父组件传递过来的数据名称，并在template中使用在父组件中通过自定义的属性(属性名为在子组件中声明的数据名称)，将值传递。值可以是任何值（ref的响应式数据，数组、对象、基本数据类型等）子组件中接收title，id,isPublished三个值

<script setup>
defineProps(['title',"id","isPublished"])
</script>

<template>
  <p>第{{ id }}篇文章-是否出版了: {{isPublished}}</p>
  <h4>{{ title }}</h4>
</template>

父组件中，使用自定义的title,id,isPublished属性，将对应的数据传递过去

<script setup>
import { ref } from 'vue'
import BlogPost from './BlogPost.vue'
  
const posts = ref([
  { id: 1, title: '学习Vue之旅' },
  { id: 2, title: '使用vue写博客' },
  { id: 3, title: '为什么vue如何有趣' }
])
</script>

<template>
<BlogPost
  v-for="post in posts"
  :key="post.id"
  :title="post.title"
  :id='post.id'
  is-published="false" ></BlogPost>
</template>

事件监听

在子组件中使用defineEmits声明自定义事件，在组件中添加触发条件

<script setup>
  defineEmits(["count-add"])
</script>

<template>
  <h2>A Child Component!</h2>
  <button @click="$emit('count-add',5)">+</button>
</template>

在父组件中使用@或v-on添加对自定义事件count-add的监听函数，并在触发时，传入事件处理函数

<script setup>
import { ref } from 'vue'
import ChildComp from './ChildComp.vue'
const count=ref(0)
</script>

<template>
  <h2> {{count}} </h2>
  <ChildComp @countAdd="(n)=>count+=n"/>
</template>

插槽

插槽指的是子组件中挖空，等待在父组件中填空子组件中添加slot标签

<template >
 
    <strong>slot挖空!</strong><br/>
    <slot />
 
</template>

父组件中可以在开始和结束标签之间，添加需要的内容

<script setup>
import AlertBox from './AlertBox.vue'
</script>

<template>
	<AlertBox>
  	填空<br>
    slot是一个占位符，直接输入内容，占位符与挖空   
	</AlertBox>
</template>

效果：

源码链接：Vue SFC Playground (vuejs.org)

依赖注入

依赖注入是数据进行跨域传递使用的是provide/inject 给子孙后代传递数据，需要使用provide,provide需要使用import引入

<script setup>
import { ref, provide } from 'vue'
import Child from './Child.vue'
const message = ref('hello')

provide('注入名称', message)
</script>

<template>
  <input v-model="message">
  <Child />
</template>

provide有两个参数，第一个参数是注入名称，在孙子组件中通过这个参数，使用传过来的值。第二个参数是值，这个值可以是任意值可以是任意类型，包括响应式的状态 inject注入使用

<script setup>
import { inject } from 'vue'
const message = inject('注入名称')
</script>

<template>
  <p>将数据传给孙子: {{ message }}</p>
</template>

vue-组件