VUE3之Non-Props属性的具体使用

2024-12-12 05:08:05

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.createApp({
        template:`
            <div>
                <test message="hello" />
            </div>
        `
    });
    app.component("test", {
        template:`
            <div>123</div>
        `
    });
    const vm = app.mount("#myDiv");

这个例子中，虽然主组件在使用 test 子组件时，传了 message 参数，但子组件没有接收，会发生什么事情，看下面截图：

最后渲染时，把 message = "hello" 原封不动的渲染到了 test 子组件的最外层标签上

2.2 不想把Non-Props 属性渲染到最外层标签

我们希望我不接收的属性，就是不接收，不要渲染到最外层标签

app.component("test", {
        inheritAttrs:false,
        template:`
            <div>123</div>
        `
    });

在子组件中增加属性inheritAttrs:false，Non-Props 属性就不会渲染到最外层标签了

2.3Non-Props 属性的使用场景

大家可能会问，这个属性子组件不需要，VUE 还硬放到子组件的最外层元素，这是为什么，有什么用呢，我们来看下面的例子

const app = Vue.createApp({
        template:`
            <div>
                <test style="color:red" />
            </div>
        `
    });
    app.component("test", {
        template:`
            <div>123</div>
        `
    });

从这个例子就能看出，当父组件想为子组件添加样式时，使用Non-Props 属性就非常合适，也适合于其他单纯传递属性的场景。

2.4 子组件有多个最外层标签

刚才讲了，Non-Props 属性会往子组件最外层的标签渲染属性，当子组件有多个最外层标签时，VUE 会如何渲染呢，看下面的例子

const app = Vue.createApp({
        template:`
            <div>
                <test style="color:red" class="myClass" />
            </div>
        `
    });
    app.component("test", {
        template:`
            <div>123</div>
            <div>456</div>
            <div>789</div>
        `
    });

三个最外层标签都没有父组件传递的属性，VUE 不知道该给哪个标签渲染，干脆就不渲染了

2.5 为某个最外层标签渲染

如果我们希望某个标签可以拿到父组件的属性，可以这样写

const app = Vue.createApp({
        template:`
            <div>
                <test style="color:red" class="myClass" />
            </div>
        `
    });
    app.component("test", {
        template:`
            <div>123</div>
            <div v-bind="$attrs" >456</div>
            <div>789</div>
        `
    });

使用 v-bind="$attrs"，让 VUE 知道这个标签需要父组件的属性

2.6 获取父组件传递的某一个属性

上面的例子，子组件中间的 div 标签被渲染了父组件传递的所有属性，如果这个标签只需要的其中一个或几个属性，可以这么写

const app = Vue.createApp({
        template:`
            <div>
                <test style="color:red" class="myClass" />
            </div>
        `
    });
    app.component("test", {
        template:`
            <div>123</div>
            <div :style="$attrs.style" >456</div>
            <div>789</div>
        `
    });

这样，中间的 div 只被渲染了 style 属性，而没有 class 属性

2.7 生命周期函数获取Non-Props 属性

子组件的生命周期函数，也是可以获取Non-Props 属性的，我们来看下面的例子

app.component("test", {
        mounted() {
            console.info(this.$attrs.class);
        },
        template:`
            <div>123</div>
            <div :style="$attrs.style" >456</div>
            <div>789</div>
        `
    });

3. 综述

到此这篇关于VUE3 之 Non-Props 属性的文章就介绍到这了,更多相关VUE3 之 Non-Props 属性内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

对VUE中的对象添加属性

背景:在通过接口获取数据集对象后,根据业务场景需要在数据集对象上增加额外的属性 data中定义的数据集对象mindData格式示例如下 mindData: [ {label:'清醒',value:'清醒'}, {label:'朦胧',value:'朦胧'}, {label:'嗜睡',value:'嗜睡'}, {label:'昏睡',value:'昏睡'}, {label:'谵妄',value:'谵妄'}, {label:'模糊',value:'模糊'}] 1) 通过post调用接口获取minDa
vue获取DOM元素并设置属性的两种实现方法

这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式方法二: 使用ref,给相应的元素加ref="name" 然后再this.$refs.name获取到该元素注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值如果给子组件
简单理解vue中Props属性

本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件. "prop" 是组件数据的一个字段,期望从父组件传下来.子组件需要显式地用 props 选项声明 props: Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以
用Vue.js实现监听属性的变化

前言创建 Vue 实例时,Vue 将遍历 data 的属性,通过 ES5 的 Object.defineProperty 将它们转为 getter/setter,在其内部 Vue 可以追踪依赖.通知变化. const vm = new Vue({ data: {foo: 1} // 'vm.foo' (在内部,同 'this.foo') 是响应的 }) 观察属性变化 Vue 的实例提供了 $watch 方法,用于观察属性变化. const vm = new Vue({ data: {foo:
Vue动态控制input的disabled属性的方法

有时候会有这样的需求,新增的时候可以输入,但是无法修改,此时就需要通过控制input标签的disabled属性来实现,那vue是如何动态设置input输入框的disabled属性的呢? 输入框的html源代码 <el-input v-model="dataForm.name" placeholder="配置项" v-bind:disabled="dataForm.id"></el-input> 新增~ 通过F12查看实际页
浅谈vue的iview列表table render函数设置DOM属性值的方法

如下所示: { title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ src:params.row.leaderIdNumber }}) } }, 找了好多,终于找到了原因,如果想要让列表返回的是一个img标签,并且设置img的src,这里不能用props,而是要用domProps就ok了. 以上这篇浅谈vue的iview列表table render函数设置DOM属
vue中v-for循环给标签属性赋值的方法

1.给每个按钮添加class的属性值以及icon图标属性值,通过v-for实现自动添加样式,发现属性值无法显示,切记在属性前加上v-bind <html> <head> <meta charset="utf-8"> <title>v-for在线测试实例</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"> &
说说Vuex的getters属性的具体用法

什么是getters 在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中.但是如果很多组件都使用这个过滤后的数据,比如饼状图组件和曲线图组件,我们是否可以把这个数据抽提出来共享?这就是getters存在的意义.我们可以认为,[getters]是store的计算属性. 源码分析 wrapGetters初始化getters,接受3个参数,store表示当前的Store实例,moduleGetters
Vue路由对象属性 .meta $route.matched详解

$route.fullPath 1 路由是:/path/:type真正路径是:/path/list 2 path匹配路径: /path/list 3 fullPath匹配路由: /path/:type 路由元信息 .meta const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, // a meta field meta:
Vue 使用Props属性实现父子组件的动态传值详解

如下所示: <!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue&quo
详细聊聊vue中组件的props属性

目录问题一:那props具体是怎么使用呢?原理又是什么呢?往下看问题二:那如果我们想给年龄加1岁,怎么实现? 问题三:对于年龄这一类型,我们最希望拿到的是什么数据类型? 问题四:可以限制类型,那是不是也可以限制是否必传呢? 问题五:props接收的属性值可以修改吗? 问题六:必须要修改props属性值,怎么办? 总结:配置项props 总结今天这篇文章,让你彻底学会props属性-- props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data.el.ref是一个级别的配
vue组件props属性监听不到值变化问题

目录 props属性监听不到值变化问题 props监听变化的几种方式应用场景 1.computed 计算属性 2.methods 方法 3.watch 侦听器 props属性监听不到值变化问题在写项目时遇到一个问题,父组件传到子组件的prop,在子组件监听不到变化, 遂查看vue文档,得知watch有一种深度监听的方法. 阅读vue文档如下代码.=> var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4,
vue子组件如何获取父组件的内容(props属性)

目录子组件如何获取父组件的内容 props属性 vue父→子组件的props传值需求1 需求2 子组件如何获取父组件的内容 props属性组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件. 想要引用父组件需要: <bbb v-bind:myMsg="msg"></bbb>//子组件将父组件的数据msg绑定到myMsg上 bbb:{ props:{ 'myMs
详解Vue3 中的计算属性及侦听器

目录计算属性缓存 getter 和 setter 侦听器配置选项其它写法计算属性我们知道,在模板中可以直接通过插值语法显示一些data中的数据,但是在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示在模板中使用表达式,可以非常方便的实现,但是设计它们的初衷是用于简单的运算,在模板中放入太多的逻辑会让模板过重和难以维护,并且如果多个地方都使用到,那么会有大量重复的代码所以我们希望将业务逻辑和UI界面进行分离,其中一种方式就是将逻辑抽取到一个met
vue子组件通过.sync修饰符修改props属性方式

目录子组件通过.sync修饰符修改props属性子组件修改父组件prop的几种方式常用方式取巧方式子组件通过.sync修饰符修改props属性在vue子组件中,如果我们直接修改props中的属性,会报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed
vue3中的props组件抽离

目录 props组件抽离引言场景组件模板抽离的写法 props组件抽离引言假设你已经了解了Vue3的setup函数,不了解的话可以先看看这篇文章. vue3中setup函数的使用在setup函数中我们知道它有两个参数,用于接收父组件传递参数的props.与负责表示上下文对象的context,在context中常用的是分发自定义事件的函数emit,用于组件抽象化后的通信. 在了解了概念后我们可以在本文中动手抽象分离一个组件. 场景现在假设需要抽象出一个移动端的顶部Header组件,首
Vue3源码分析组件挂载初始化props与slots

目录前情提要初始化组件 (1).setupComponent (2).initProps (3).initSlots 额外内容总结前情提要上文我们分析了挂载组件主要调用了三个函数: createComponentInstance(创建组件实例).setupComponent(初始化组件).setupRenderEffect(更新副作用).并且上一节中我们已经详细讲解了组件实例上的所有属性,还包括emit.provide等的实现.本文我们将继续介绍组件挂载流程中的初始化组件. 本文主要内
vue3中使用ref和emit来减少props的使用示例详解

目录前言示例示例1 示例2 前言在之前开发vue2项目中,props 属性在组件中经常使用来进行组件通信.现在在开发vue3项目的过程中,我们开发小组渐渐的减少props的使用,转而用ref 和 emit 来代替.缺点不太清楚,但是好处还是挺多的.下面结合实际的开发常见来举例. 示例示例1 以弹窗组件来说,之前vue2时是通过props属性来控制弹窗的打开,比如下面这个新增弹窗退货的弹窗组件(大多数清空下,新增和修改一般是一个组件) <add-return-goods :visible