Vue自定义组件学习笔记

专业描述:

vue关于自定义组件的描述中，父子组件是相对的概念,父组件表示引用当前组件的组件,子组件就是当前组件；

1)关于props和emits选项的理解

1.props:我们平时写的.vue文件实际上就是一个自定义组件,只是一般不会考虑复用性,不会去设置props选项,相当于无参构造(props类似与C#的构造参数，而data选项内的参数类似于C#的私有字段);props本身用于接收父组件实例化子组件时传递过来的参数,实现v-model中的输入绑定

---updated 2024/04/28:

自定义组件和页面的最大区别是自定义组件有props，面向的是开发者，没有路由，而页面则是面向用户的http请求输入，需要使用路由来传入参数.本质上都是用于实现用户的页面交互.

2.emits:自定义组件中emits选项用于设置组件的事件列表,以供父组件在实例化子组件时赋值绑定具体的function，本质上还是子组件对父组件实例化时暴露的事件类型的参数;用于绑定funciton,类似初始化配置回调函数,实际执行事件时还是从子组件的原生事件为起点逐层执行父组件配置的事件，

--2024/03/23更新

emits类似于C#在代码中执行了一个event，如果父组件有在这个event绑定具体的function，则会执行这个function。

2)设计自定义组件的v-model

在设计自定义组件时,props只能单边接受父组件的输入,为了组件的v-model可以工作,如何实现子组件的输出呢？答案就是利用子组件的emits,子组件将变更后的值传递给父组件.

<!-- CustomInput.vue -->
<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

如上,组件通过@input执行$emit('update:modelValue', $event.target.value)将$event.target.value传递给父组件,从而实现子组件值的输出.

另外一种，还可以在子组件执行的事件中定义并执行父组件的事件：

    pickerSelect({ pickerSelected }) {
      if (this.modelType === 'object') {
        //v-model is Object
        let _pickerSelected = getObject(pickerSelected[0]);
        if (JSON.stringify(this.currentValue) !== JSON.stringify(_pickerSelected)) {
          this.currentValue = _pickerSelected;
          this.$emit('input', _pickerSelected);
          this.$emit('select', _pickerSelected);
        }
      } else {
        //v-model is String or Number
        let _pickerSelected = pickerSelected[0];
        let _pickerSelectedValue = _pickerSelected[this.valueKey];
        if (!this.currentValue || this.currentValue[this.valueKey] !== _pickerSelectedValue) {
          this.currentValue = _pickerSelected;
          this.$emit('input', _pickerSelectedValue);
          this.$emit('select', _pickerSelected);
        }
      }
    }

如上代码pickerSelect方法是在子组件的select元素中执行的方法,此方法中会触发父组件的@input和@select事件(如果有).类似于C#的代码中执行event事件.

另外,修饰符用于在子组件向父组件输出值时作的一些处理,如对输入的字符串的首字母进行大写，确保父组件实例化子组件v-model绑定的属性值始终首字母大写

3)透传attribute

透传attribute实际上是父组件实例化子组件时直接使用子组件中根元素已有的属性或事件,而无需单独在子组件中定义props/emits.

4)mixins属性:mixins属性体现的是在设计组件库时的代码复用性设计思想,可以理解为C#中的继承，组件可以继承来自minxins配置中的值.

5）自定义指令:与mixins的代码复用性不同,自定义指令体现的是可扩展性设计思想,类似于C#中的扩展方法,在客户代码侧为组件扩展功能.我们可以在客户组件或page页面中自定义指令,并给依赖 的子组件赋予能力.

6)插槽 Slots

与父组件通过props传入javascript类似,插槽 Slots是父组件传入子组件的模板代码。slot的作用域在父组件,天生就可以获取到父组件作用域的data,而如果在父组件中需要访问子组件的属性时,可以在子组件的slot为插槽定义属性,属性绑定子组件的数据,父组件可以通过v-slot命令接收到: