# 今日学习内容
## Vue
### 父组件 data 或 methods 的值 可以通过 自定义属性（:xxxx="xxxx"），通过 子组件的 props 传递给 子组件
数据在哪个组件，更新数据的行为（方法），就应该定义在哪个组件
### String.trim(); 方法用于删除字符串的头尾空格
trim() 方法用于删除字符串的头尾空格。
trim() 方法不会改变原始字符串。
### Window.confirm( message ); 方法用于显示一个带有指定消息和确认及取消按钮的对话框。
confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。
如果访问者点击"确定"，此方法返回true，否则返回false。
### const 赋值 this; methods 函数 this 指向问题
methods: { deleteItem() { const { comment, index, deleteComment } = this; if (window.confirm(`确定删除${comment.name}的评论吗？`)) { deleteComment(index); } }, },
### array.splice(index,howmany,item1,.....,itemX) 方法用于添加或删除数组中的元素。
splice() 方法用于添加或删除数组中的元素。
注意：这种方法会改变原始数组。
### Arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
reduce() 可以作为一个高阶函数，用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
reducer 函数接收4个参数:
Accumulator (acc) (累计器)
Current Value (cur) (当前值)
Current Index (idx) (当前索引)
Source Array (src) (源数组)
initialValue 可选。传递给函数的初始值
### window.localStorage localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。 存储的数据格式为 String
语法
window.localStorage
保存数据语法：
localStorage.setItem("key", "value");
读取数据语法：
var lastname = localStorage.getItem("key");
删除数据语法：
localStorage.removeItem("key");
返回值: 一个存储对象
localStorage 其他注意事项
一般我们会将 JSON 存入 localStorage 中，但是在 localStorage 会自动将 localStorage 转换成为字符串形式。
这个时候我们可以使用 JSON.stringify() 这个方法，来将 JSON 转换成为 JSON 字符串。
读取之后要将 JSON 字符串转换成为 JSON 对象，使用 JSON.parse() 方法：
打印出来是 Object 对象。
另外还有一点要注意的是，其他类型读取出来也要进行转换。
实例：
### 深度监视 watch
watch: { // 深度监视 todos: { deep: true, // 深度监视 handler: function(value) { // 将 todos 最新的值，保存到 localstorage window.localStorage.setItem("todos_key", JSON.stringify(value)); }, }, },
### 组件间通信
2.5.1. 组件间通信基本原则
1) 不要在子组件中直接修改父组件的状态数据
2) 数据在哪, 更新数据的行为(函数)就应该定义在哪
#### 组件间通信 1: props 父向子，可隔代，兄弟之间要借助父组件
2.6.1. 使用组件标签时 <my-component name='tom' :age='3' :set-name='setName'></my-component> 2.6.2. 定义 MyComponent 时 时 1) 在组件内声明所有的 props 2) 方式一: 只指定名称 props: ['name', 'age', 'setName'] 3) 方式二: 指定名称和类型 props: { name: String, age: Number, setNmae: Function } 4) 方式三: 指定名称/类型/必要性/默认值 props: { name: {type: String, required: true, default:xxx}, } 2.6.3. 注意 1) 此方式用于父组件向子组件传递数据 2) 所有标签属性都会成为组件对象的属性, 模板页面可以直接引用 3) 问题: a. 如果需要向非子后代传递数据必须多层逐层传递 b. 兄弟组件间也不能直接 props 通信, 必须借助父组件才可以
#### 组件间通信 2: vue 自定义事件 子向父，不可隔代，不可兄弟之间
2.7.1. 绑定事件监听 // 方式一: 通过 v-on 绑定 @delete_todo="deleteTodo" // 方式二: 通过$on() this.$refs.xxx.$on('delete_todo', function (todo) { this.deleteTodo(todo) }) 2.7.2. 触发事件 // 触发事件(只能在父组件中接收) this.$emit(eventName, data) 2.7.3. 注意: 1) 此方式只用于子组件向父组件发送消息(数据) 2) 问题: 隔代组件或兄弟组件间通信此种方式不合适
#### 组件间通信 3: 消息订阅与发布(PubSubJS 库) 任意父子通信，无隔代要求，订阅对应父绑定事件监听，发布对应子触发事件。
安装 npm i pubsub-js -S 查看信息 npm info pubsub-js 2.8.1. 订阅消息 PubSub.subscribe('msg', function(msg, data){}) 2.8.2. 发布消息 PubSub.publish('msg', data) 2.8.3. 注意 1) 优点: 此方式可实现任意关系组件间通信(数据) 2.8.4. 事件的 2 个重要操作( 总结) 1) 绑定事件监听 (订阅消息) 目标: 标签元素 <button> 事件名(类型): click/focus 回调函数: function(event){} 2) 触发事件 (发布消息) DOM 事件: 用户在浏览器上对应的界面上做对应的操作 自定义: 编码手动触发
#### 组件间通信 4: slot 父向子传递 `标签数据`，一般组件不确定 标签结构时使用
2.9.1. 理解
此方式用于父组件向子组件传递`标签数据`
2.9.2. 子组件: Child.vue
<template>
<div>
<slot name="xxx">不确定的标签结构 1</slot>
<div>组件确定的标签结构</div>
<slot name="yyy">不确定的标签结构 2</slot>
</div>
</template>
2.9.3. 父组件: Parent.vue
<child>
<div slot="xxx">xxx 对应的标签结构</div>
<div slot="yyy">yyyy 对应的标签结构</div>
</child>