实现父子组件
vue3通过 import 直接引入子组件就可以使用, 不需要 components 挂载。
父组件
<template>
<h2>我是父组件</h2>
<ChildComponent />
</template>
<script lang="ts" setup>
import ChildComponent from '@/components/hs-crud/prop.vue'
</script>
子组件
<template>
<div>我是子组件：{{ value }}</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref(1)
</script>
效果展示
父组件传值给子组件
- 父组件传值给子组件主要是由父组件通过在在标签上绑定
:numberVal="number"数值，而后传给子组件；子组件则通过defineProps接收使用。 - 现在子组件中有个数值1，父组件通过
defineProps给子组件传值
父组件
<template>
<div style="text-align: center">
<h2>我是父组件</h2>
<ChildComponent :numberVal="number" />
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import ChildComponent from '@/components/hs-crud/prop.vue'
let number = ref(100)
</script>
子组件
- 方式一：使用 TypeScript 的
interface来定义 props 的类型，这样可以让 TypeScript 在编译时进行类型检查。如果你正在使用 TypeScript 并且希望充分利用它的类型系统来增强代码的可维护性和错误检查，那么这种方式更好。
<template>
<div>我是子组件：{{ value }}</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
interface Props {
numberVal?: Number
}
const propsPrams = defineProps<Props>() // 接收传递的参数
const value = ref(propsPrams.numberVal) // 使用参数
</script>
interface Props 的其他书写方式
interface Props { propA: number; // 必须是数字类型。 propB?: string; // 是可选的字符串类型 propC: number[]; // 是一个数字数组。 }
- 方式二：直接在调用
defineProps函数时定义了 props 的类型，这种方式既可以在 TypeScript 中使用，也可以在 JavaScript 中使用。没有使用额外的 TypeScript 类型定义，而是直接在defineProps中指定了每个 prop 的类型。这种方式更简洁，并且对于不需要 TypeScript 强类型特性的项目来说可能更方便。个人理解此种方式后期维护成本低，扩展性强。
<template>
<div>我是子组件：{{ value }}</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
// 接收传递的参数
const propsParams = defineProps({
numberVal: Number
})
const value = ref(propsParams.numberVal) // 使用参数
</script>
const propsParams = defineProps() 的其他书写方式
const propsParams = defineProps({ // 数字类型的 prop propA: Number, // 字符串类型的 prop，并有一个默认值 `'default value'`。 propB: { type: String, default: 'default value', }, // 数组类型的 prop，并提供了一个函数来生成默认值 `[1, 2, 3]`。 propC: { type: Array, default: () => [1, 2, 3], }, // 必需的对象类型的 prop，并且使用 `PropType` 显式指定了对象的形状。 propD: { type: Object as PropType<{ key: number }>, required: true, } });
defineProps参数介绍
| 属性 | 说明 | 可选值 |
|---|---|---|
| type | 传递的参数类型，是一个原生构造函数 | String、Number、Boolean、Array、Object、Function等 |
| default | 没有传递参数时显示的默认值 | 可以是一个值，也可以是一个返回默认值的工厂函数（尤其是对于对象和数组类型的 prop） |
| required | 是否必须传递 | 如果设为 true，而父组件没有提供这个 prop，Vue 将会发出警告 |
| validator | 自定义验证函数 | 接收即将设置的值作为参数，如果值有效则返回 true，否则返回 false。 |
const props = defineProps({
propName: {
type: String,
required: true,
default: 'default string',
validator: (value) => {
// 验证字符串是否符合某些条件
return value.length > 0;
}
},
});
请记住，
default和validator属性不应该与required: true同时使用，因为如果 prop 是必需的，则不应该有默认值（因为它必传）。
子组件传值给父组件
父组件
<template>
<div style="text-align: center">
<h2>我是父组件</h2>
<!-- 监听子组件触发的 updateValue 事件，并调用 handleUpdate 方法 -->
<ChildComponent @updateValue="handleUpdate" />
<h3>父组件接收的子组件的值：{{ receivedValue }}</h3>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import ChildComponent from '@/components/hs-crud/prop.vue'
// 创建一个 ref 来存储从子组件接收到的数据
const receivedValue = ref('')
// 定义一个方法，用于处理从子组件接收到的数据
function handleUpdate(value) {
receivedValue.value = value
}
</script>
子组件
将窗前明月光传递给父组件
<template>
<div>我是子组件：{{ value }}</div>
<el-button @click="emitValue('窗前明月光')">点击给父组件传递</el-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
// 定义一个 emit 函数，指定可能触发的事件名称
const emit = defineEmits(['updateValue'])
const emitValue = (val: string) => {
emit('updateValue', val)
}
</script>
上边的方式是Vue 的设计哲学倾向于父组件通过 props 向下传递数据，子组件通过事件向上发送消息，以保持数据流的清晰和可维护性，能解决99%的问题，当然还有很多传值方式，可以做了解
其他方式父组件传值给子组件
1. v-model 双向绑定
// 父组件
<template>
<ChildComponent v-model="parentData" />
</template>
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const parentData = ref('Initial value');
</script>
// 子组件
<script setup>
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
modelValue: String
});
function updateValue(newValue) {
emit('update:modelValue', newValue);
}
</script>
<template>
<input :value="modelValue" @input="updateValue($event.target.value)">
</template>
2. 插槽 (Slots)
// 父组件
<template>
<ChildComponent>
<template #default="{ slotProp }">
This is content from the parent: {{ slotProp }}
</template>
</ChildComponent>
</template>
<script setup>
import ChildComponent from './ChildComponent.vue';
</script>
// 子组件
<template>
<slot :slot-prop="dataFromChild"></slot>
</template>
<script setup>
import { ref } from 'vue';
const dataFromChild = ref('Data from child component');
</script>
3. 提供/注入 (Provide/Inject)
虽然提供/注入机制通常用于跨越多个层级的通信，但它也可以用于父子组件间的通信。
// 父组件
import { provide } from 'vue';
provide('providedData', 'some data to inject');
// 子组件
import { inject } from 'vue';
const providedData = inject('providedData');
4. 全局状态管理（如 Vuex、Pinia）
- 对于更复杂的应用程序，可能需要全局状态管理库来处理跨组件的数据流。Vuex 和 Pinia 是 Vue 生态系统中两个流行的状态管理库。
- 使用全局状态管理，你可以在父组件中修改状态，然后在子组件中读取相同的状态。
其他方式子组件传值给父组件
1. v-model 双向绑定
当你需要创建可受控的表单输入或自定义表单组件时，可以使用 v-model 来实现子组件到父组件的通信。
// 子组件
const emit = defineEmits(['update:modelValue']);
function updateValue(newValue) {
emit('update:modelValue', newValue);
}
父组件中的 v-model 将监听上面触发的事件，并更新相应的状态。
<!-- 父组件 -->
<ChildComponent v-model="parentData" />
2. 提供/注入 (provide/inject)
这种方式更多地用于跨多个层级的组件通信，不过也可以用于直接的父子通信。父组件提供数据或方法，子组件注入它们。
// 父组件
import { provide } from 'vue';
provide('updateFn', data => { /* 更新数据的方法 */ });
// 子组件
import { inject } from 'vue';
const updateFn = inject('updateFn');
updateFn('new value');
3. Refs
虽然不推荐直接操作子组件的实例，但在某些情况下，你可以通过 ref 直接访问子组件并调用其方法。
<!-- 父组件模板 -->
<template>
<ChildComponent ref="childCompRef" />
</template>
<script setup>
const childCompRef = ref(null);
childCompRef.value.methodInChild('data from parent');
</script>
4. 函数作为 Props
可以将一个函数作为 prop 传递给子组件，子组件调用这个函数时可以将数据作为参数传回父组件。
// 子组件
props: {
onCustomEvent: Function
},
methods: {
sendDataToParent() {
if (this.onCustomEvent) {
this.onCustomEvent('some data');
}
}
}
父组件传递一个处理函数作为 prop。
<!-- 父组件 -->
<ChildComponent :on-custom-event="handleDataFromChild" />
Vue 的响应式系统和组件间的通信设计鼓励自顶向下（父到子）的数据流动，以确保数据的单向流动，从而使得应用的状态更易于理解和管理。子组件向父组件的通信通常应该通过自定义事件来完成，这样能够避免直接修改父组件的状态，保持组件之间的清晰界限。
