About Vue + element plus wrapping Component Understanding

About Vue + element plus wrapping Component Understanding

I. Thoughts on preparation

I'll use the design of the el-select checkbox as an example.

Parent and Component pass params and Function using Props, and Component uses the computed property computed to realize that the parent component modelValue is the same as the child component modelValue.

Second, the parent component call when the code is written

The parent component needs to introduce the wrapped component, pass parameters and methods to it.

<template>
    <Component
        ref="componentRef"
        v-model="data"
        :params="params"
        :api="queryApi"
    />
</template>

<script lang="ts" setup>
    // Bring the component into the parent component
    import Component from 'component path'
    // Bind data to the parent component
const data = ref(Class T)

    // Define componentRef to be able to use Function, data thrown by component
    const componentRef = ref()

    // Parameters for function lookups
    const params = ref(Class T)

    // A data fetching function for the parent component. The function is defined by the calling parent component so that it can be generalized for subsequent calls.
    const queryApi = () => {

    }
</script>;

III. Packaging component code writing

<template>
  <el-select
    v-model="data"
    clearable
    style="width: 100%"
    value-key="key"
  >
    <el-option
      v-for="item in optionList"
      :value="item"
      :label=""
      :key=""
    />
  </el-select>
</template>

<script setup lang="ts"> </el-select> </template>
    // Introduce a default query method
    import query from 'query method path'
    // An event called update:modelValue that fires when the value of the local ref changes.
const emit = defineEmits(['update:modelValue'])

    // Declare the props component in order to know that the parent component is using the data passed in by the props.
    const props = defineProps({
        // The value of the property bound to the v-model when the parent component calls the component.
        modelValue: {
          default: () => null, type: Object, {
          type: Object, {
        }, // The model value passed in by the parent component.
        // The api passed in by the parent component
        api: {
          default: () => null, type: Function, }, // The api passed in by the parent component.
          type: Function, }, // The api passed in by the parent component.
        }, // The parent component passes in the query parameters.
        // Query parameters passed in by the parent component
        params: {
            default: () => null, type: Object, }, // Parent component passes in query parameters.
            type: Object, }, // Parent component passed in query parameters.
        }, // Initialize loading.
        // Initialize loading
    requestAuto: {
      default: () => true, type: Boolean, }, // Initialize loading.
      type: Boolean, }, // Initialize loading.
    }, }
  }

    // The list of option boxes
    const optionList = ref()

    const data = computed({
        // Called when the data data is accessed, it takes the modelValue passed by the parent component and returns modelValue
        get: () => {
          return
        }, // Called when the data data has been assigned a value.
        // Called when data is assigned a value, data is assigned to val, the update:modelValue event is triggered by the emit method, and the new value val is passed to the parent component.
        set: (val) => {
          emit('update:modelValue', val)
        }
  })

    // Write the loadOptions function
    const loadOptions = () => {
        // Determine if all methods are passed in
        if(api){
            api().then(res => {

            }).catch(err => {

            }).finally(() => {

            }
        }else{
        query().then(res => {

            }).catch(err => {

            }).finally(() => {

            }
        }
    }

    // Whether or not to do initialized loading
     && loadData()

    // Use defineExpose to expose component methods and properties to the parent component to be able to load data when it's not autoloaded.
    defineExpose({ loadOptions })
</script>