Vue3.0 菜鸟儿🐤常见问题汇总

接手了公司的一个祖传项目，这尼玛Vue绝对是世界上最蛋疼的前端语言，研究了一下午连他怎么导出和引入的都没搞明白 …
经过了 N 番面向 ChatGPT 编程，基本算是入门了 …

注意看链接 🔗 名：vue-learning-tears … 这尼玛我是一把鼻涕一把泪学完的 …

组件封装

子组件通知父组件进行更新

• 父组件

<script setup lang="ts">
  /**
   *
   * @param value
   */
  const onDeliveryWayChange = (value: number | string) => {
    console.log("onDeliveryWayChange 父组件: ", value);
  };
</script>

<template>
  <MineDeliveryWaySelector @onDeliveryWayChange="onDeliveryWayChange" />
</template>

<style scoped lang="scss"></style>

• 子组件

这一块基本没什么问题，就是@change="一个函数"

<template>
  <ClientOnly>
    <el-select
      v-model="value"
      placeholder="提油方式"
      @change="onDeliveryWayChange"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
  </ClientOnly>
</template>

下面就要了血命了 …
最开始我是this.$emit()，尼玛告诉我this == undefined …
后来换成getCurrentInstance()，尼玛告诉我getCurrentInstance() == null …

最后 ChatGPT 告诉我

在 Vue 3 中，getCurrentInstance 函数需要在 setup 函数内部使用才能正确获取当前组件实例的上下文。在 methods 中使用箭头函数会导致 this 的指向问题，因此无法正确获取组件实例。

<script>
  export default {
    setup(props, { emit }) {
      const options = [
        { label: "全部", value: "0" },
        { label: "自提", value: "1" },
        { label: "配送", value: "2" },
      ];
      const value = ref("");
      const onDeliveryWayChange = (value) => {
        console.log("onDeliveryWayChange 子组件: ", value);
        emit("onDeliveryWayChange", value);
      };

      return {
        options,
        value,
        onDeliveryWayChange,
      };
    },
  };
</script>

element-ui 回调参数汇总

el-cascader

这个打印出来是个代理？Proxy(Array) {0: 2, 1: 24}？

@change="onOilModelPress"

const onOilModelPress = async (dataset) => {
  let values = JSON.parse(JSON.stringify(dataset));
  emit("onOilModelPress", values);
};

el-select

这个打印出来直接就是value，没啥好研究的。

@change="onDeliveryWayChange"

const onDeliveryWayChange = (value) => {
  emit("onDeliveryWayChange", value);
};

el-tabs

这个研究了半天，当前选中的Tab属性搞在tab.props.?里面？

@tab-click="onTabPress"

const onTabPress = (tab, event) => {
  let current = tabs.find((it) => it.name == tab.props.name);
  emit("onTabPress", current);
};

el-pagination

还好，直接回调的当前的page.

@current-change="onPagerPress"

const onPagerPress = (page: any) => {
  onQueryParamsChange("pageNo", page);
};

el-input

这个也还好，直接返回的text。

@input="onQuerySearchTextChange"

const onQuerySearchTextChange = (value: string) => {
  onQueryParamsChange("search", value);
};