封装组件
封装组件有以下几点好处：
- 简化开发过程：在开发过程中，我们经常会遇到一些相似的功能需求，比如表单验证、数据展示等。
- 提高代码的可读性和可维护性：组件封装将代码块封装成一个整体，使代码结构更加清晰，逻辑更加明确。开发者只需关注组件的输入和输出，无需关心其内部实现细节。同时，由于组件是独立的，修改一个组件不会影响其他组件，使得代码的维护更加方便。
Vue2封装组件
子组件
- props：可以声明子组件接收的参数，包括参数的数据类型、是否必填以及默认值等信息。
- type: 用于声明参数的数据类型。在Vue.js中，可以使用简单的JavaScript类型，如Number、String、Boolean等，也可以使用自定义类型。
- required: 用于声明参数是否必填。当设置为true时，表示该参数是必需的，父组件必须传递值给子组件。当设置为false时，表示该参数是可选的，父组件可以选择是否传递值。
- default: 用于声明参数的默认值。当父组件没有传递值给子组件时，子组件将使用该默认值。
- emit: 用于触发事件，第一个参数是事件名称，之后的参数是向这个事件传入的参数。触发事件相当于调用父组件绑定这个事件的函数。
<!-- Son.vue 子组件 -->
<script>
export default {
props: { // 可以声明子组件接收的参数
sonValue: {
type: Number, // 用于声明参数的数据类型
required: true, // 用于声明参数是否必填
default: 100 // 用于声明参数的默认值
}
}, // 传入参数
methods: {
sonFunction(){
this.$emit("event",参数列表) // 触发一个事件，用于调用外部函数
}
}
}
</script>
父组件
- refs与ref 使用ref绑定一个子组件，使用$refs来获取已经绑定的子组件，然后调用子组件的方法
- v-bind 使用v-bind（简写为 : )来绑定子组件的参数，下面案例中既可以使用sonValue，也可以使用son-value。
- v-on 使用v-on（简写为 @）来绑定子组件的事件。
<!-- Father.vue 父组件 -->
<template>
<Son :son-value="name" ref="child" v-on:event="fatherFuncation" />
</template>
<script>
import Son from "./Son"
export default {
components: { Son },
data:(){
return{
name:"用于传给子组件的变量"
}
}
methods: {
fatherFuncation(){
this.$refs.child.sonFunction() // 使用子组件的方法
}
}
}
</script>
Vue3组合式（选项式同Vue2）
子组件
- defineProps：可以构建声明子组件接收的参数的响应式对象，包括参数的数据类型、是否必填以及默认值等信息。
- type: 用于声明参数的数据类型。在Vue.js中，可以使用简单的JavaScript类型，如Number、String、Boolean等，也可以使用自定义类型。
- required: 用于声明参数是否必填。当设置为true时，表示该参数是必需的，父组件必须传递值给子组件。当设置为false时，表示该参数是可选的，父组件可以选择是否传递值。
- default: 用于声明参数的默认值。当父组件没有传递值给子组件时，子组件将使用该默认值。
- emit: 用于触发事件，可以在template中直接 $emit 触发，第一个参数是事件名称，之后的参数是向这个事件传入的参数。触发事件相当于调用父组件绑定这个事件的函数。
<template>
<!-- Son.vue 子组件 -->
<button @click="$emit('click', 1)">
Increase by 1
</button>
</template>
<script setup>
const props = defineProps({
sonValue: {
type: Number, // 用于声明参数的数据类型
required: true, // 用于声明参数是否必填
default: 100 // 用于声明参数的默认值
}
})
const emit = defineEmits(['event','click']) // 用于声明事件
const sonFunction = () => {
console.log(props.sonValue); // js中访问参数
emit("event",参数列表) // 触发一个事件，用于调用外部函数
}
</script>
父组件
- ref 在template中使用ref绑定一个组件，在script使用ref创建响应式数据的时候如果传入null则会创建 绑定template中ref同名组件的对象 用于调用子组件函数，
- v-bind 使用v-bind（简写为 : )来绑定子组件的参数，下面案例中既可以使用sonValue，也可以使用son-value。
- v-on 使用v-on（简写为 @）来绑定子组件的事件。
<!-- Father.vue 父组件 -->
<template>
<Son :son-value="name" ref="child" v-on:event="fatherFuncation" />
</template>
<script setup>
import Son from "./Son"
import { ref, onMounted } from 'vue';
const name = ref("用于传给子组件的变量")
const child = ref(null);
const fatherFuncation = () => {
child.sonFunction() // 使用子组件的方法
}
</script>
