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

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

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

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

$attr是父组件传给子组件的数据，且在prop中没有的。
可以理解成： $attrs中包含的数据=(父组件总的传过来的数据 - 子组件props接收的数据)

$lisenner：将父组件的方法，传递给子组件。

$slot ：将父组件的插槽，传递给子组件。
关于使用常见的理解：可以用于二次封装组件。

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

html 复制代码

// 父组件
  <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>

html 复制代码

// 父组件
  <div class="wrapper"> 
    <my-input  @change="inputChange">
    </my-input>
  </div>


// 子组件通过写$listeners 来接收父组件的事件
// 子组件
<el-input v-on="$listeners"></el-input>

html 复制代码

// 父组件
    <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中。

html 复制代码

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

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

v2.2.0+ 可以使用v-model

v2.3.0+ 可以使用.sync

html 复制代码

// 原理是一样的，这里使用    .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>

html 复制代码

// 原理就是：

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

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

前端日志系统都能做啥？

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

系统架构：

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

至于存储数据就不详细描述了，劫持console和http请求即可

关于存储到浏览器本地，可以使用IndexedDB，这里推荐Dexie.js操作数据库。