VUE3 之 Non-Props 属性

最新推荐文章于 2024-05-31 10:39:27 发布
最新推荐文章于 2024-05-31 10:39:27 发布
阅读量223 收藏
点赞数
分类专栏： python 文章标签： vue.js 前端 javascript 计算机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013190417/article/details/122647026
版权
本文介绍了Vue3中的Non-Props属性，它是指子组件未通过props接收的父组件传递的参数。文章通过示例展示了Non-Props属性如何默认渲染到子组件最外层标签，以及如何避免这种渲染。还探讨了Non-Props属性的使用场景，如传递样式和其他属性，并讲解了当子组件有多个最外层标签时的处理方法。最后提到了在生命周期函数中获取Non-Props属性的方法。
摘要由CSDN通过智能技术生成

Python微信订餐小程序课程视频

https://edu.csdn.net/course/detail/36074

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475
1. 概述

墨菲定律告诉我们：人总是容易犯错误的，无论科技发展到什么程度，无论是什么身份的人，错误总是会在不经意间发生。因此我们最好在做重要的事情时，尽量去预估所有可能发生的错误，并思考错误发生后的补救方案，再准备一个或多个备选方案。这样才能做到有备无患，防患于未来。

言归正传，之前我们聊了组件的传参，今天我们来聊一下  Non-Props 属性， Non-Props 这个词，不了解的同学一定觉得很高深，其实很简单，之前讲的组件传参，子组件会使用 props:[’’] 的方式接收父组件传递的参数，如果子组件不使用 props:[’’] 接收参数，那这个参数就是一个  Non-Props 属性。下面我们通过例子来详细看一下。

2. Non-Props 属性

2.1 初识 Non-Props 属性

<body>
    <div id="myDiv">div>
body>
<script>
 const app = Vue.cr
最低0.47元/天 解锁文章
虚幻私塾
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-coerce-props:强制道具随心所欲
05-12
VueCoerceProps 将值转换/强制转换为所需的值安装npm install vue-coerce-props 在全局或本地安装mixin： // main.jsimport CoercePropsMixin from 'vue-coerce-props'Vue . mixin ( CoercePropsMixin ) // ...
Vue- 组件与props属性的用法
qq_41537354的博客
09-12 323
在 Vue 里，一个组件实质上是一个拥有预定义选项的一个 Vue 实例：(单独测试的时候记得new Vue()渲染) // Define a new component called todo-item Vue.component(‘todo-item’, { template: ‘This is a todo’ }) 现在你可以在另一个组件模板中写入它： 但是这样会为每个 todo 渲染...
Vue3中props的原理与使用
每天都想吃好吃的
12-23 992
需要注意的是，Vue3中的props是只读的，不能在子组件中修改props的值。在Vue3中，props仍然是用来接收父组件传递给子组件的数据的。然而，在Vue3中，props的使用有一些变化。函数，该函数接收一个对象作为参数，对象的属性即为props的定义。使用props：在Vue3中，可以直接在模板中使用props，无需使用。定义props：在Vue3中，定义props需要使用。接收props：在Vue3中，接收props需要使用。函数的参数中，可以通过解构赋值的方式获取props。
【Vue】Non-Props 属性是什么
看花容易绣花难
09-09 353
Non-Props 属性是什么
vue3：使用ref和emit来减少props的使用
weixin_41897680的博客
06-16 3060
vue3：使用ref和emit来减少props的使用
vue3-class-component
04-08
2. **Composition API**：Vue 3 引入的主要特性之一，它允许开发者将组件的功能分解到可复用的函数中，提升了代码的模块化和可维护性。 3. **Class-Based Components**：Vue3-Class-Component 库实现了基于类的组件...
vue里面v-bind和Props 利用props绑定动态数据的方法
10-18
【3】`v-bind` 的一个重要特点是它会动态地将父组件的属性值绑定到子组件，这意味着如果父组件的属性值发生变化，子组件接收到的值也会相应更新。如果没有使用 `v-bind`，则子组件只能接收静态的字符串值，无法响应...
vue3-dev-tools.crx
02-22
Vue3 DevTools 是一款强大的浏览器开发者工具，专为Vue.js 3.x框架设计，用于帮助开发者在构建Vue应用时进行调试、分析和优化。这款工具提供了直观的组件树视图，实时的数据绑定查看，以及性能分析等功能，极大地...
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
08-31
Vue2.0 利用 v-model 实现组件 props 双向绑定的优美解决方案 在 Vue2.0 中，默认情况下 props 只能从父级传递到子级，无法实现双向绑定。这种设计的初衷是为了避免双向绑定可能引发的数据混乱问题。然而，在实际...
Vue3中的组件通信方式（props,
div_336699的博客
09-21 221
vue3组件通信
vue之父子组件Non-props属性
john的博客
07-22 124
Non-props属性指的是父组件给子组件传值，子组件不去接收 const app = Vue.createApp({ data(){ return{ message:'hello world', } }, template:'<div>{{message}} <test num="123"></test></div>', }); app.component('test',{
Vue学习笔记 Non-props属性
petit_wu的专栏
03-11 280
Non-porps属性 父组件向子组件传递参数的时候，子组件不写任何的接受方法，这个时候父组件就会直接把属性完全复制给子组件，子组件也是可以得到属性值的。 注意：Non-porps属性会复制，props属性不会复制 如果组件不是一个根节点，复制就会失效。 在标签中使用父组件传入的属性 通过$attrs可以在组件使用父组件传入的所有属性 通过$attrs.style的形式（style是其中一个属性值名）可以使用其中一个属性 注意：使用$attrs.style形式调用props属性，无法复制.
VUE3组件 (1) 关于defineProps()
热门推荐
sepgit的博客
05-23 4万+
vue3 组件入门 defineProps()
Vue3学习笔记
yiyueqinghui的博客
08-06 452
vue3
vue3模板props问题
xyz的爬坑经历
01-10 1352
vue3带参数模板的参数问题
Vue3的props需要注意的地方（简写与监视属性）
zxdznyy的博客
10-10 360
1.props是可以在模板语法中简写的。就好比，toRefs了一下state。我们没必要在模板语法中加上props.xxx；2.有时我们需要监视props的内容，可以用到监视属性watch。需要以这样的格式书写才可以正常响应。
【Vue3】组件props的使用
qq_2511276124的博客
02-01 4760
Props 是一种特别的 attributes，你需要在组件上声明注册，然后才能识别成props,而不是普通的attributes。 本篇主要讲解props的用法，以及传递后的porps值如何保持其响应性。
Vue3: 透传的说明 + Props和 Attrs的区别
最新发布
EvanYYY1的博客
05-31 1569
Vue3 透传和porps的区别
vue3 tree-props
09-14
Vue3的`tree-props`属性用于配置树形组件的相关属性。根据您提供的引用内容，我们可以看到在使用`tree`树形控件时，您可以通过`tree-props`来设置相关属性。 具体来说，`tree-props`属性可以包含以下属性： 1. `node-key`：用于指定树节点的唯一标识符。在您的代码中，`node-key`属性的值为`id`。 2. `check`：用于指定处理节点点击事件的方法。在您的代码中，`check`属性的值为`handleNodeClick`。 除了上述两个属性，还可以设置其他属性，例如： - `default-expanded-keys`：用于设置默认展开的节点。在您的代码中，`default-expanded-keys`属性的值为空数组`[]`，表示初始时没有任何节点展开。 综上所述，您可以在Vue3中使用`tree-props`属性来配置树形组件的相关属性，包括节点的唯一标识符(`node-key`)、处理节点点击事件的方法(`check`)以及设置默认展开的节点(`default-expanded-keys`)等。 : 通过`tree`树形控件的`default-checked-keys`属性来设置默认选中的节点。 : 在`data`中，`categorylist`、`categorylistTwo`、`categorylistThr`和`hasChildren`等属性可能与树形组件有关。但是具体与`tree-props`有关的信息并未提供。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值