本篇探讨当父组件通过属性给子组件传数据时, 子组件如果不通过 props 属性进行接收, 那数据会挂载到哪里, 以及子组件如何能使用这些数据.

正常的父子组件传值

<!DOCTYPE html>

<html lang="en">

<head>

  <title>正常-父子组件传值</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      // 1. 父组件通过 msg 属性给子组件传递一个 "hello, youge" 的数据

      template: `

      <div>

        <Son msg="hello, youge" />

      </div>

      `

    })

    app.component('Son', {

      // 2. 正常逻辑就是子组件通过 props 进行接收

      props: ['msg'],

      template: `<div>son</div>`

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

现在, 如果子组件 Son 不写 props 属性的话, 则这个数据会自动挂载的子组件 Son 的最外层 dom 上如下:

<div msg="hello, youge">son</div>

当然, 子组件也可选择就不接收父组件数据, 则在子组件中设置 inheritAttrs: false 即可.

 app.component('Son', {

      inheritAttrs: false,

      template: `<div>son</div>`

    })

non-props 应用

当父组件要给子组件传递一个样式的时候, 就可直接自动应用到子组件最外层 dom 啦.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>nop-props 传样式过去</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      template: `

      <div>

        <Son style="color: orange;" />

      </div>

      `

    })

    app.component('Son', {

      template: `<div>son</div>`

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

则可看到父组件传递的样式在子组件上就直接生效了, 这还是有使用场景的. 但当我们的子组件最外层有多个 dom 节点时, 则可通过 v-bind="$attrs" 的来指定作用于谁.

app.component('Son', {

      template: `

      <div>son</div>

      <div v-bind="$attrs">son</div>

      <div>son</div>

      `

    })

这就表明样式的这个 nop-props 就作用于上图第二个节点了.

$attrs 就是用来存储父子局传过来的所有属性, 则就可以按需使用了.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>传多值 $attrs</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      template: `

      <div>

        <Son style="color: orange;" />

      </div>

      `

    })

    app.component('Son', {

      template: `

      <div>son</div>

      <div v-bind="$attrs">son</div>

      <div>son</div>

      `

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

当然更多的应用配置是, 我能自己去通过 $attrs 对父组件传过来的多数据进行自己随意应用.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>传多值 $attrs</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      template: `

      <div>

        <Son msg="hello" msg1="youge" />

      </div>

      `

    })

    app.component('Son', {

      template: `

      <div :msg="$attrs.msg">{{$attrs.msg}}</div>

      <div>啥都不接收</div>

      <div :cj="$attrs.msg1">{{$attrs.msg1}}</div>

      `

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

对于这些 nop-props 的属性数据, 则子组件可通过 v-bind="$ attrs.xxx" 进行应用即可. 同时它也是可以直接在其他地方用的, 比如生命周期函数:

<script>

    const app = Vue.createApp({

      template: `

      <div>

        <Son msg="hello" msg1="youge" />

      </div>

      `

    })

    app.component('Son', {

      mounted () {

        console.log(this.$attrs.msg)

      },

      template: '<div>son</div>'

    })

</script>

小结

  • 父子组件传值常规操作是父组件通过属性传数据给子组件, 子组件通过 props 进行接收
  • non-props 即当子组件不通过 props 接收父组件传的数据时, 其都会存在 $attrs 这个属性中
  • 子组件可通过 v-bind=$attrs.xxx 的方式对 non-props 的数据进行应用
  • 在很多地方如生命周期函数都是可以直接访问 $attrs 的数据, 即 this.s.attrs.xxx

vue3 基础-non-props 特性的更多相关文章

  1. 4-3 组件参数校验与非props特性

    本文参考脚本之家,https://www.jb51.net/article/143466.htm 通过属性的形式,父组件对子组件进行参数的传递 //如下图: //父组件设置content属性,向属性中 ...

  2. linux基础之bash特性

    linux基础之bash特性 1.命令历史 命令历史包含的环境变量 $HISTSIZE:命令历史记录的条数 $HISTFILE:命令历史文件~/.bash_history $HISTFILESIZE: ...

  3. Java基础-面向对象第一特性之封装(Encapsulation)

    Java基础-面向对象第一特性之封装(Encapsulation) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.理解什么是面向过程和面向对象 面向过程与面向对象都是我们编程中 ...

  4. Redis 宝典 | 基础、高级特性与性能调优

    转载:Redis 宝典 | 基础.高级特性与性能调优 本文由 DevOpsDays 本文由简书作者kelgon供稿,高效运维社区致力于陪伴您的职业生涯,与您一起愉快的成长.     作者:kelgon ...

  5. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  6. vue组件参数校验与非props特性

    组件参数校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  7. C#基础系列——Attribute特性使用

    前言:上篇 C#基础系列——反射笔记 总结了下反射得基础用法,这章我们来看看C#的另一个基础技术——特性. 1.什么是特性:就博主的理解,特性就是在类的类名称.属性.方法等上面加一个标记,使这些类.属 ...

  8. JAVA基础——面向对象三大特性：封装、继承、多态

    JAVA面向对象三大特性详解 一.封装 1.概念: 将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问. 2.好处: 只能通过规定的方法访问数据. ...

  9. Redis基础、高级特性与性能调优

    本文将从Redis的基本特性入手,通过讲述Redis的数据结构和主要命令对Redis的基本能力进行直观介绍.之后概览Redis提供的高级能力,并在部署.维护.性能调优等多个方面进行更深入的介绍和指导. ...

  10. Redis 基础、高级特性与性能调优

    本文将从Redis的基本特性入手,通过讲述Redis的数据结构和主要命令对Redis的基本能力进行直观介绍.之后概览Redis提供的高级能力,并在部署.维护.性能调优等多个方面进行更深入的介绍和指导. ...

随机推荐

  1. QT5笔记： 32. QPainter 基本绘制

  2. Typecho网站内容的禁止复制和粘贴

    本教程讲JS实现网站内容的禁止复制和粘贴.另存为 1.使右键和复制失效 方法1: 在网页中加入以下代码: <script language="Javascript"> ...

  3. 批量上传序列到Gisaid数据库

    本文演示的是用Gisaid官网自带的Excel宏批量上传毒株信息和序列到Gisaid数据库,需要魔法. 1. 下载GISAID Batch Uploader 找到自己需要上传的病毒类型,我是Flu,在 ...

  4. Zookeeper - 客户端常用命令

    查看客户端命令帮助信息 查看Zookeeper的版本 查看使用过的历史命令 查看根目录下的znode 创建znode 查看节点信息 修改znode的内容 删除znode 关闭连接 连接客户端 退出客户 ...

  5. FastAPI 请求体参数与 Pydantic 模型完全指南：从基础到嵌套模型实战 🚀

    title: FastAPI 请求体参数与 Pydantic 模型完全指南:从基础到嵌套模型实战 date: 2025/3/7 updated: 2025/3/7 author: cmdragon e ...

  6. python excel 数据整理：如何删除重复的记录

    data = frame.drop_duplicates(subset='', keep='first', inplace='') drop_duplicates用法:subset='需要去重复的列名 ...

  7. 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！

    前言 今天大姚给大家分享 3 个 .NET 开源.免费的文件压缩处理库,希望可以快速帮助同学们实现文件压缩和解压功能! SharpCompress SharpCompress 是一个基于 C# 编写的 ...

  8. Vue3生命周期钩子函数深度解析：从源码到实战的万字指南

    一.Vue3生命周期革新特性 相较于Vue2,Vue3通过Composition API带来了更灵活的生命周期管理方式.通过onBeforeMount等函数注册钩子时,实际是通过injectHook方 ...

  9. CSRF的理解及Flask和Django的解决方案

    CSRF 攻击的原理 1. 用户正常登录 网站A 2. 网站A 向用户浏览器写入cookies(包含登录信息) 3. 用户在没有登出的情况下,访问了网站B(攻击网站) 4. 网站B 伪造了一个 网站A ...

  10. Java使用多线程处理未知任务数方案

    知道任务个数,你可以定义好线程数规则,生成线程数去跑 代码说明: 虚拟线程池: 使用 Executors.newVirtualThreadPerTaskExecutor() 创建虚拟线程池,每个任务将 ...