【今日文章】：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>
1
2
3
4
5
6
7
8
9
10
11
12

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


// 子组件通过写$listeners 来接收父组件的事件
// 子组件
<el-input v-on="$listeners">el-input>
1
2
3
4
5
6
7
8
9
10

// 父组件
    <my-input>
      <template slot="prepend">prependtemplate>
      <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

官方解释：

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

个人理解：

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

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

复制一份到data中。

// 子组件
prop:{
	parentVal
},
data(){
	return{
	   // 复制一份值出来
	   parentValCopy:this.parentVal
	}
}
1
2
3
4
5
6
7
8
9
10

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

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

// 原理就是：

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

1
2
3
4
5
6

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

前端日志系统都能做啥？

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

系统架构：

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

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