前端传值及本地存储方式的简单介绍
介绍：前端开发中，组件间通信和本地数据存储是至关重要的。本文将介绍前端常见的组件传值方式和本地存储方式。
### 组件间传值
在前端开发中，组件间传递数据是非常常见的。我们通常使用以下方法来实现：
#### 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，不过这种方式使用相对较少，因为它的一些限制和安全性问题。