本篇探讨当父组件通过属性给子组件传数据时, 子组件如果不通过 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. 2024电子取证“獬豸杯”WP

    简介: 竞赛为个人赛,工具自备,只发证书(还没用,公告这么写的哈)竞赛选手们将对模拟的案件进行电子数据调查取证,全面检验参赛选手电子数据取证的综合素质和能力. 检材链接: https://pan.ba ...

  2. 【渗透测试】 Vulnhub JANGOW: 1.0.1

    渗透环境 攻击机:   IP: 192.168.149.128(Kali) 靶机:     IP:192.168.149.129 靶机下载地址:https://www.vulnhub.com/entr ...

  3. [Qt 基础内容-05] QDialogButtonBox

    QDialogButtonBox 本文主要根据QT官方帮助文档以及日常使用,简单的介绍一下QDialogButtonBox的功能以及使用 文章目录 QDialogButtonBox 简介 信号和槽 基 ...

  4. Go是怎么解决包依赖管理问题的？

    我们先来了解一下 Go 构建模式的演化过程,弄清楚 Go 核心开发团队为什么要引入 Go module 构建模式. Go 构建模式时怎么演化的? Go 程序由 Go 包组合而成的,Go 程序的构建过程 ...

  5. selenium爬虫学习1

    简介 Selenium是广泛使用的模拟浏览器运行的库,它是一个用于Web应用程序测试的工具. Selenium测试直接运行在浏览器中,就像真正的用户在操作一样,并且支持大多数现代 Web 浏览器. 函 ...

  6. bug|SCSS相关问题

    参考链接 [系统学习css]scss和sass以及 less的关系,node-sass.dart-sass和sass-loader是啥

  7. [每日算法 - 华为机试] LeetCode1160. 拼写单词

    题目入口 力扣https://leetcode.cn/problems/find-words-that-can-be-formed-by-characters/ 题目概述 给你一份『词汇表』(字符串数 ...

  8. [源码系列：手写spring] IOC第四节：Bean属性注入

    主要内容 添加PropertyValue类表示Bean的属性. 为Bean定义对象BeanDefinition添加PropertyValues列表用来存储Bean的各种属性. Bean实例化时根据Pr ...

  9. [每日算法] leetcode第1题：两数之和

    leetcode第1题入口 知识点 寻找循环体中目标值之间的关系来减少循环层数 (利用关系建立查找对方的数据结构来空间换时间) 题目描述 给定一个整数数组 nums 和一个整数目标值 target,请 ...

  10. DVWA靶场实战(十三)——CSP Bypass

    DVWA靶场实战(十三) 十三.CSP Bypass: 1．漏洞原理: CSP Bypass全称是Content-Security-Policy,中文叫做绕过内容安全策略.Content-Securi ...