【今日文章】：1.关于 $attr $lisenner $slot 用法的思考 2. 关于父子组件传值的思考 3.关于前端日志系统搭建的思考
- 1.关于 $attr $lisenner $slot 用法的思考
- 2. 关于父子组件传值的思考
- 问题一：在子组件中想修改父组件传来的数据，需要怎么做?
- 问题二：我想把父组件传来的值修改，并且把修改后的值传给父组件，完成类似于双向绑定的操作，需要怎么操作？
- 3.关于前端日志系统搭建的思考
1.关于 $attr $lisenner $slot 用法的思考
定义：父组件传给子组件的数据。
$attr是父组件传给子组件的数据，且在prop中没有的。
可以理解成：$attrs中包含的数据=(父组件总的传过来的数据 - 子组件props接收的数据)- $lisenner：将父组件的方法，传递给子组件。
- $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. 关于父子组件传值的思考
首先父子组件传值需要遵循单项数据流：
官方解释：
父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。- 这意味着你
不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
个人理解：
父组件可以向子组件通过属性形式传递任意参数，当属性变化的时候，子组件中的prop会刷新成最新的值。子组件不能修改父组件传来的数据，只能使用父组件传来的数据。
问题一：在子组件中想修改父组件传来的数据，需要怎么做?
复制一份到data中。
// 子组件
prop:{parentVal
},
data(){return{// 复制一份值出来parentValCopy:this.parentVal}
}
问题二：我想把父组件传来的值修改，并且把修改后的值传给父组件，完成类似于双向绑定的操作，需要怎么操作？
- v2.2.0+ 可以使用
v-model- 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.关于前端日志系统搭建的思考
前端日志系统都能做啥？
- 对console的记录
- 对http网络请求的记录
- 能通过网页查看各个记录
系统架构：
- 存储各种数据
- 先存到浏览器本地，再上传到服务器
至于存储数据就不详细描述了，劫持console和http请求即可
关于存储到浏览器本地，可以使用IndexedDB，这里推荐Dexie.js操作数据库。
