《Vue 学习笔记中遇到的问题 》

Vue 学习笔记中遇到的问题

问题引入

原因分析

• 在 vue 中 Home 组件中声明了 多个 相同的key 属性

汉字转拼音的需求

自我学习，了解到有一个插件（js-pinyin）可以实现此功能：

以下是我的实践过程：
基于vue 项目的安装方式之一（npm 安装形式）~ 命令如下：
npm i js-pinyin --save

js-pinyin 插件的基本使用

基本引用

import pinyin from 'js-pinyin'

pinyin （Object类型）

属性

1. char_dict （string类型）
2. full_dict （Object类型）
3. options （Object类型）
4. polyphone（Object类型）

方法

1. setOptions
2. getFullChars // 获取全拼
3. getCamelChars  // 获取拼音首字母

方法详解

1. setOptions方法的使用
pinyin.setOptions(obj)   该方法需要传递一个对象类型的入参

obj:  {
	charCase: 0 // 字符大小写 （0-首字母大写；1-全小写；2-全大写）
	checkPolyphone: false // 是否检查多音字
}

vue 插槽使用

111

动态插槽使用

<template v-slot:[aaa]="{ row }" v-for="(aaa) in ['col-overHandleSet', 'col-overDutySet', 'col-dutyBonusPenaltySet', 'col-handleBonusPenaltySet', 'col-satisfiedBonusPenaltySet', ]">
  <span v-html="`${ row[`${ aaa || '' }`.replaceAll(/col-/g, '')] || '' }`.replaceAll(/(\n|;|；)/g, '<br />')" v-show="row[`${ aaa || '' }`.replaceAll(/col-/g, '')]"></span>
  <span v-show="!row[`${ aaa || '' }`.replaceAll(/col-/g, '')]">-</span>
</template>

可选链式语法的使用（?.属性，比如obj?.name）

npm install --save-dev @babel/plugin-proposal-optional-chaining// 解析可选链式语法

module.exports = {
  presets: [
    ["@babel/preset-env", {
      modules: false,
      useBuiltIns: "usage",
    }],
    ['@vue/app', {
      useBuiltIns: "entry",//添加
    }],
  ],
  plugins: [
    ["component", {
      "libraryName": "mint-ui",
      "style": true,
    }],
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true,
    }],
    ["@babel/plugin-proposal-optional-chaining", {// 解析可选链式语法

    }],
  ],
}

父组件和子孙组件中间的数据交互

···
v-on="$listeners"可以方便进行子组件、甚至子孙子组件向父组件的父组件传递数据（调用this.$emit(‘定义的方法名称’，参数【需要传递的数据】)）
···