【今日文章】: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组件:

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. 关于父子组件传值的思考

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

官方解释:

  1. 父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。

  2. 每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值

  3. 这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。
    个人理解:

  4. 父组件可以向子组件通过属性形式传递任意参数,当属性变化的时候,子组件中的prop会刷新成最新的值。

  5. 子组件不能修改父组件传来的数据,只能使用父组件传来的数据。

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

复制一份到data中。

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

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

  1. v2.2.0+ 可以使用v-model
  2. 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.关于前端日志系统搭建的思考

前端日志系统都能做啥?

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

系统架构:

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

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

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

相关推荐
小白变怪兽39 分钟前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头42 分钟前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全2 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing2 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆2 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding3 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机3 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人3 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景4 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui