Vue2、Vue3封装组件

封装组件

封装组件有以下几点好处：

• 简化开发过程：在开发过程中，我们经常会遇到一些相似的功能需求，比如表单验证、数据展示等。
• 提高代码的可读性和可维护性：组件封装将代码块封装成一个整体，使代码结构更加清晰，逻辑更加明确。开发者只需关注组件的输入和输出，无需关心其内部实现细节。同时，由于组件是独立的，修改一个组件不会影响其他组件，使得代码的维护更加方便。

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>