本篇探讨当父组件通过属性给子组件传数据时, 子组件如果不通过 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. ES - 概述

    前言 Q1:ElasticSearch 是什么? 为什么要学习? ElasticSearch 是一个分布式.可扩展.实时的搜索和分析引擎,基于 Lucene 构建.它可以用于全文搜索.结构化搜索.分析 ...

  2. dx12学习之旅-

    记录一下,第一篇博客2024年7月26日下午. 计划在毕业后从事游戏开发的工作,现在在学习龙书dx12,平时会写一些对龙书内容上的一些理解.在读完全书之后,会考虑进行一次龙书相关的总结,不过这应该要很 ...

  3. 写一个简单的SQL生成工具

    知识点: MyBatis 语法概览 MyBatis 是一个强大的数据持久化框架,它提供了一种半自动化的 ORM 实现方式.通过 MyBatis,开发者可以通过简单的 XML 或注解来配置和映射原生信息 ...

  4. 分享一个 Win11 隐藏右下角日期时间的解决方案

    分享一个 Win11 隐藏右下角日期时间的解决方案

  5. VMware ESXi系统

    esxi全称"VMware ESXi",是可直接安装在物理服务器上的强大的裸机管理系统,是一款虚拟软件,不需安装其他操作系统,是VMware服务器虚拟化的基础.通过直接访问并控制底 ...

  6. SeaBIOS实现简单分析

    SeaBIOS是一个16bit的x86 BIOS的开源实现,常用于QEMU等仿真器中使用.本文将结合SeaBIOS Execution and code flow和SeaBIOS的源码对SeaBIOS ...

  7. 多态的引入--java进阶day02

    1.多态的介绍 总的来说就是一句话,使用多态,所有的子类都可以根据父类这个桥梁来连接它们各自的成员方法,从而调用方法,减少多次的代码重写,使代码更加简单便捷 我们以之前说的公司写业务为例子来理解多态, ...

  8. 【Linux】5.10 输入输出重定向

    Shell 输入/输出重定向 大多数 UNIX 系统命令从你的终端接受输入并将所产生的输出发送回​​到您的终端.一个命令通常从一个叫标准输入的地方读取输入,默认情况下,这恰好是你的终端.同样,一个命令 ...

  9. 【Python】基础操作

    指定解释器的运行环境 有时候我们会遇见报错 SyntaxError: Non-ASCII character '\xe4' in file E:/PycharmProjects/LEDdisplay2 ...

  10. shader中的if语句优化

    可以借用lerp和step来拼接模仿语句 lerp(a,b,step(value,c))