【今日文章】：1.关于 $attr $lisenner $slot 用法的思考 2. 关于父子组件传值的思考 3.关于前端日志系统搭建的思考

父子组件传值的思考 3.关于前端日志系统搭建的思考"/>

【今日文章】：1.关于 $attr $lisenner $slot 用法的思考 2. 关于父子组件传值的思考 3.关于前端日志系统搭建的思考

【今日文章】：1.关于 $attr $lisenner $slot 用法的思考 2. 关于父子组件传值的思考 3.关于前端日志系统搭建的思考

• 1.关于 $attr $lisenner $slot 用法的思考
• 2. 关于父子组件传值的思考
• • 问题一：在子组件中想修改父组件传来的数据，需要怎么做?
  • 问题二：我想把父组件传来的值修改，并且把修改后的值传给父组件，完成类似于双向绑定的操作，需要怎么操作？
• 3.关于前端日志系统搭建的思考

1.关于 $attr $lisenner $slot 用法的思考

定义：父组件传给子组件的数据。

1. $attr是父组件传给子组件的数据，且在prop中没有的。
   可以理解成： $attrs中包含的数据=(父组件总的传过来的数据 - 子组件props接收的数据)
2. $lisenner：将父组件的方法，传递给子组件。
3. $slot ：将父组件的插槽，传递给子组件。

关于使用常见的理解：可以用于二次封装组件。

举个例子，比如说二次封装el-input组件：

// 父组件<div class="wrapper"> <my-input placeholder="自定义组件" size="large" v-model="myInput"></my-input></div>// 子组件
// 这个时候，如果子组件中的props没有定义上面的属性，都会通过$attrs传过来
<template><el-input v-bind="$attrs"></el-input>
</template>

// 父组件<div class="wrapper"> <my-input  @change="inputChange"></my-input></div>// 子组件通过写$listeners 来接收父组件的事件
// 子组件
<el-input v-on="$listeners"></el-input>

// 父组件<my-input><template slot="prepend">prepend</template><template slot="append"> append </template></my-input>// 子组件
<template><el-input><template v-for="(val, key) in $slots"><slot :name="key"></slot></template></el-input>
</template>

2. 关于父子组件传值的思考

首先父子组件传值需要遵循单项数据流：

官方解释：

1. 父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
2. 每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。
3. 这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

个人理解：

1. 父组件可以向子组件通过属性形式传递任意参数，当属性变化的时候，子组件中的prop会刷新成最新的值。
2. 子组件不能修改父组件传来的数据，只能使用父组件传来的数据。

问题一：在子组件中想修改父组件传来的数据，需要怎么做?

复制一份到data中。

// 子组件
prop:{parentVal
},
data(){return{// 复制一份值出来parentValCopy:this.parentVal}
}

问题二：我想把父组件传来的值修改，并且把修改后的值传给父组件，完成类似于双向绑定的操作，需要怎么操作？

1. v2.2.0+ 可以使用v-model
2. v2.3.0+ 可以使用.sync

// 原理是一样的，这里使用    .sync// 父组件
<template><div>我是父子组件之间同步的数据{{data}}<child :data.sync='data'></child>   // 1.父组件使用 .sync</div>
</template>
<script>data(){return {data:'我是来自父组件的数据'}}
</script>// 子组件
<template><div><input type="text" v-model="childData" @input="childDataChange"></div>
</template>
<script>props:{data:{default:'',type:String}},data(){return {//2.子组件复制父组件传来的值childData:this.data }},methods:{// 3. 子组件触发update:data，修改值并将值传递给父组件childDataChange(){this.$emit('update:data', this.childData) }}
</script>

// 原理就是：<child :data='data' v-on:update:data="data = $event"></child>被简化成了<child :data.sync='data'></child>

3.关于前端日志系统搭建的思考

前端日志系统都能做啥？

1. 对console的记录
2. 对http网络请求的记录
3. 能通过网页查看各个记录

系统架构：

1. 存储各种数据
2. 先存到浏览器本地，再上传到服务器

至于存储数据就不详细描述了，劫持console和http请求即可
关于存储到浏览器本地，可以使用IndexedDB，这里推荐Dexie.js操作数据库。