前端传值及本地存储方式的简单介绍

介绍：前端开发中，组件间通信和本地数据存储是至关重要的。本文将介绍前端常见的组件传值方式和本地存储方式。

### 组件间传值

在前端开发中，组件间传递数据是非常常见的。我们通常使用以下方法来实现：

#### 1. 父子组件传值

父组件通过属性向子组件传递数据，子组件使用 `props` 来接收这些数据。示例代码如下：

```vue
<!-- 父组件 -->
<template>
? <Son :token="yourToken"></Son>
</template>

<script>
import Son from "../components/Son.vue";

export default {
? components: {
? ? Son,
? },
? data() {
? ? return {
? ? ? yourToken: "your token value",
? ? };
? },
};
</script>

<!-- 子组件 -->
<script>
export default {
? props: ["token"],
? mounted() {
? ? console.log(this.token); // 使用父组件传递的 token
? },
};
</script>
```

#### 2. 子父组件传值

子组件通过 `$emit` 触发事件向父组件传递数据。父组件使用 `v-on` 监听子组件触发的事件，接收传递的数据。示例代码如下：

```vue
<!-- 子组件 -->
<script>
export default {
? methods: {
? ? sendData() {
? ? ? this.$emit("yourEventName", "your data"); // 触发自定义事件并传递数据
? ? },
? },
};
</script>

<!-- 父组件 -->
<template>
? <Son @yourEventName="handleData"></Son>
</template>

<script>
import Son from "../components/Son.vue";

export default {
? components: {
? ? Son,
? },
? methods: {
? ? handleData(data) {
? ? ? console.log(data); // 接收子组件传递的数据
? ? },
? },
};
</script>
```

### 本地存储方式

在前端中，我们可以使用不同的本地存储方式来保存数据。

#### 1. localStorage

```javascript
// 存储数据
localStorage.setItem("key", "value");

// 获取数据
const data = localStorage.getItem("key");

// 移除数据
localStorage.removeItem("key");
```

#### 2. sessionStorage

```javascript
// 存储数据
sessionStorage.setItem("key", "value");

// 获取数据
const data = sessionStorage.getItem("key");

// 移除数据
sessionStorage.removeItem("key");
```

#### 3. Cookie

在前端，我们可以使用 `document.cookie` 来操作 Cookie，不过这种方式使用相对较少，因为它的一些限制和安全性问题。