Vue中的插槽

默认插槽（Default Slot）：

  1. 单个默认插槽：

    在子组件中使用 <slot></slot> 来定义一个默认插槽，父组件可在此处传递内容。

    1
    2
    3
    4
    5
    6
    <!-- ChildComponent.vue -->
    <template>
      <div>
        <slot></slot>
      </div>
    </template>
    1
    2
    3
    4
    5
    6
    <!-- ParentComponent.vue -->
    <template>
      <child-component>
        This content will be passed to the default slot.
      </child-component>
    </template>

具名插槽（Named Slot）：

  1. 具名插槽：

    可以使用 v-slot 指令和名称来定义具名插槽，使得父组件在填充内容时可以选择插入到指定位置。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- ChildComponent.vue -->
    <template>
      <div>
        <slot name="header"></slot>
        <div>
          <slot name="content"></slot>
        </div>
      </div>
    </template>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- ParentComponent.vue -->
    <template>
      <child-component>
        <template v-slot:header>
          This is the header slot content.
        </template>
        <template v-slot:content>
          This is the content slot content.
        </template>
      </child-component>
    </template>

  2. 作用域插槽（Scoped Slot）：

    使用带有参数的插槽可以向子组件传递数据，使父组件能够在插槽中访问子组件的数据。

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- ChildComponent.vue -->
    <template>
      <ul>
        <li v-for="item in items" :key="item.id">
          <slot :item="item"></slot>
        </li>
      </ul>
    </template>
    1
    2
    3
    4
    5
    6
    7
    8
    <!-- ParentComponent.vue -->
    <template>
      <child-component :items="items">
        <template v-slot="{ item }">
          {{ item.name }}
        </template>
      </child-component>
    </template>

通过使用插槽，Vue.js 提供了一种强大的机制，允许开发者在父子组件之间传递内容并实现更灵活的组件化开发。开发者可以根据需要选择不同类型的插槽来满足项目中的需求。

JS导入导出

在 JavaScript 中，使用不同的语法来导入和导出模块是 ES6 模块系统的一部分。下面介绍了几种常见的导入和导出方法：

导出（Export）：

  1. 命名导出（Named Exports）:

    使用 export 关键字将特定变量、函数或类导出，然后通过名称导入它们。

    1
    2
    3
    4
    5
    6
    7
    8
    // 导出
    export const name = "Alice";
    export function sayHello() {
    	console.log("Hello!");
    }

    // 导入
    import { name, sayHello } from "./moduleA";

  2. 默认导出（Default Export）:

    使用 export default 关键字指定一个模块的默认导出，可以在导入时命名。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 导出
    const person = {
    	name: "Bob",
    	age: 30,
    };
    export default person;

    // 导入
    import myPerson from "./moduleB";

导入（Import）：

  1. 命名导入（Named Imports）:

    使用花括号 {} 在导入语句中列出要导入的命名导出。

    1
    import { name, sayHello } from "./moduleA";

  2. 默认导入（Default Import）:

    使用任何名称导入默认导出，而不需要花括号。

    1
    import myPerson from "./moduleB";

  3. 整体导入（Namespace Imports）:

    使用 * as 关键字从模块中导入所有命名导出，并将它们作为对象的属性。

    1
    import * as utilities from "./utilities";

这些导入和导出方法提供了灵活的模块化开发方式，使得 JavaScript 中的代码可以更好地组织和复用。根据具体的需求，开发者可以选择适合的导入导出方法进行模块间的交互。

ES6中的新特性

ES6（ECMAScript 2015）引入了许多新特性，以下是其中一些主要特性：

  1. let 和 const 声明: 引入块级作用域变量声明方式，let 声明变量，const 声明常量。

  2. 箭头函数: 使用 => 来定义函数，简化函数的书写方式并固定 this 指向。

  3. 模板字符串: 可以通过 ${} 插值表达式在字符串中嵌入变量或表达式。

  4. 解构赋值: 可以从数组和对象中快速提取值并赋给变量。

  5. 默认参数值: 函数可以指定默认参数值，简化函数调用时的参数传递。

  6. 扩展运算符（Spread Operator）: 用于展开数组、对象等可迭代对象。

  7. 类与继承: 引入了 class 关键字，支持基于原型的面向对象编程。

  8. Promise: 提供了更好的处理异步操作的方式，避免回调地狱。

  9. 模块化: 引入了 import 和 export 关键字，支持模块化开发。

  10. Map 和 Set 数据结构: 提供了更好的数据存储和查找方式。

  11. Symbol: 引入了一种新的原始数据类型，表示独一无二的值。

  12. Generators: 允许函数暂停和恢复执行，可用于实现迭代器和异步操作。

  13. Proxy: 提供了对对象的代理，可以拦截对对象的操作。

  14. Async/Await: 简化了 Promise 的使用，使异步代码看起来更像同步代码。

这些新特性使得 JavaScript 更加强大和灵活，提高了开发效率和代码质量。开发者在使用 ES6 新特性时能够写出更加现代化和清晰的代码。

JavaScript中的数据类型

基本数据类型

  1. Number: 用于表示数字，包括整数和浮点数。
  2. String: 用于表示文本数据，以单引号或双引号包围。
  3. Boolean: 用于表示逻辑值，即 true 或 false。
  4. Null: 表示一个空值，该值是一个关键字，不是一个对象。
  5. Undefined: 表示未定义或未赋值的变量。
  6. Symbol: ES6 引入的数据类型，表示唯一的、不可变的值。
  7. BigInt: ES10 引入的数据类型，用于表示任意精度的整数。

复杂数据类型

  1. Object: 用于存储多个值的集合，可以通过名称访问其中的值。对象是由花括号{}包裹的键值对组成，也包括函数、数组、日期等。

在 JavaScript 中，通过 typeof 操作符可以获取一个值的数据类型。例如：

1
2
3
4
5
6
7
8
typeof 42; // "number"
typeof "hello"; // "string"
typeof true; // "boolean"
typeof null; // "object" (这是一个历史遗留问题，实际上null的类型是null)
typeof undefined; // "undefined"
typeof Symbol("symbol"); // "symbol"
typeof 100n; // "bigint"
typeof {}; // "object"

JavaScript 的数据类型较为灵活，开发者需要了解各种数据类型的特性和使用场景，以便在编程中合理地处理和操作不同类型的数据。

JavaScript中的proto和prototype详细介绍

__proto__

  • __proto__ 是每个 JavaScript 对象都具有的一个属性，它指向了该对象的原型。实际上，__proto__ 属性是访问对象原型的 getter/setter 方法。

  • 通过 __proto__ 属性，我们可以在运行时动态地获取和修改一个对象的原型链。

  • 示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    let animal = {
    	eats: true,
    };

    let rabbit = {
    	jumps: true,
    };

    rabbit.__proto__ = animal;

    console.log(rabbit.jumps); // true
    console.log(rabbit.eats); // true

prototype

  • prototype 是函数对象特有的属性，在创建一个函数时，该函数会自动获得一个名为 prototype 的属性。

  • 当我们使用关键字 new 来创建一个实例时，这个实例的 __proto__ 会指向其构造函数的 prototype。

  • 示例：

    1
    2
    3
    4
    5
    6
    7
    8
    function Animal(name) {
    	this.name = name;
    }

    Animal.prototype.eats = true;

    let rabbit = new Animal("Rabbit");
    console.log(rabbit.eats); // true

总结来说，__proto__ 是每个对象实例都有的内部属性，用于访问其原型；而 prototype 是函数对象特有的属性，用于构建由该函数创建的实例的原型链。JavaScript 中的原型链机制基于这两个概念，它们共同构成了 JavaScript 中对象之间继承关系的基础。