VUE中Non-Props属性的使用
定义
父组件通过在子组件上定义属性的方式，向子组件传递数据，但是子组件不写接收数据的语法props
子组件props接收数据，但是不使用
父组件向子组件传值，子组件通过props接收父组件传递过来的数据，但是子组件没有使用这个传递过来的数据
const app = Vue.createApp({
template:`
<div>
<counter msg='hello'/>
</div>
`
})
app.component('counter',{
props:['msg']
template:`<div>Counter</div>`
})
const vm = app.mount('#root')看下DOM结构
子组件不写props
const app = Vue.createApp({
template:`
<div>
<counter msg='hello'/>
</div>
`
})
app.component('counter',{
template:`<div>Counter</div>`
})
const vm = app.mount('#root')
我们发现，子组件的div上多了一个msg='hello'
当使用
non-props特性的时候，也就是父组件通过给子组件上添加属性来传递数据，但是子组件不写props接收父组件传递过来的数据的时候，它会把父组件传递过来的内容(在子组件上绑定的属性连同值一起)，放到子组件最外层的DOM标签上，变成子组件最外层DOM标签的一个属性。
相当于发生了这样的过程：
子组件<div>Counter</div>
替换了
父组件引用子组件 <counter msg='hello'/>
同时将msg='hello'属性放到子组件的DOM标签上了
变成了<div msg='hello>Counter</div>
子组件拒绝“被迫营业”？
假如子组件并不想在它最外层的DOM标签上展示，父组件传递过来的属性和值呢？
==> 那你子组件就加一个inheritAttrs: false告诉父组件吧,它的意思是“我子组件不继承父组件传递过来的non-props属性”
const app = Vue.createApp({
template:`
<div>
<counter msg='hello'/>
</div>
`
})
app.component('counter',{
inheritAttrs: false,
template:`<div>Counter</div>`
})
const vm = app.mount('#root')
嗯~，你确实做到了
实际开发中有啥用呢？
额..，好像真的没啥太大作用。但是当父组件想给子组件添加style行内样式或者class样式还是有用的嘛，强行洗白？
const app = Vue.createApp({
template:`
<div>
<counter msg='hello' style="color:red;"/>
</div>
`
})
app.component('counter',{
template:`<div>Counter</div>`
})
const vm = app.mount('#root')子组件有多个根节点？
结果就是non-props不会作用于任何一个节点，以免多个节点"暴力争抢"
const app = Vue.createApp({
template:`
<div>
<counter msg='hello' style="color:red;"/>
</div>
`
})
app.component('counter',{
template:`
<div>Counter</div>
<div>Counter</div>
<div>Counter</div>
`
})
const vm = app.mount('#root')
如果就是有“私心”，就是想指定子组件某个节点继承父组件全部的non-props呢？
那就在子组件的其中一个根节点使用v-bind="$attrs"吧
它的意思是子组价继承父组件上所有的non-props属性
const app = Vue.createApp({
template:`
<div>
<counter msg='hello' msg="hello" msg2="hello2"/>
</div>
`
})
app.component('counter',{
template:`
<div>Counter</div>
<div v-bind="$attrs">Counter</div>
<div>Counter</div>
`
})
const vm = app.mount('#root')
当然如果子组件只是想继承父组件其中的某个non-props属性也是可以的，毕竟“弱水三千，只取只取一瓢”，方法就是 v-bind:msg="$attrs.msg",通过在其中一个根节点上绑定动态属性(之所以加:，是因为等号后面是JS表达式，不是字符串)
const app = Vue.createApp({
template:`
<div>
<counter msg='hello' msg="hello" msg2="hello2"/>
</div>
`
})
app.component('counter',{
template:`
<div>Counter</div>
<div v-bind:msg="$attrs.msg">Counter</div>
<div>Counter</div>
`
})
const vm = app.mount('#root')
如何获取Non-Props？
==> 通过this.$attrs
const app = Vue.createApp({
template:`
<div>
<counter msg='hello' msg="hello" msg2="hello2"/>
</div>
`
})
app.component('counter',{
mounted() {
console.log(this.$attrs);
},
template:`
<div>Counter</div>
<div v-bind:msg="$attrs.msg">Counter</div>
<div>Counter</div>
`
})
const vm = app.mount('#root')运行结果
到此这篇关于VUE中Non-Props属性的使用的文章就介绍到这了,更多相关VUE Non-Props属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
跳转到指定URL,向history栈添加一个新的纪录,点击后退会返回至上一个页面,这篇文章给大家介绍vue如何跳转到其他页面,包括无参跳转和带参跳转,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-10-10
在本篇文章里小编给大家整理的是关于vue把输入框的内容添加到页面的实例以及相关知识点，需要的朋友们学习下。2019-11-11
这篇文章主要介绍了vue2移动端+swiper实现异形的slide方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue插件使用方法详情分享，使用插件之前显示定义，下文通过js插件定义展开详细文章介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-03-03
这篇文章主要为大家介绍了vue3.x lodash在项目中管理封装指令的优雅使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要介绍了解决Vue+ts里面this.$store问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了Vue实现数值型输入框并限制长度，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了深度解析 Vue3 的响应式机制，今天就带大家深入了解一下 Vue 3 的响应式机制，相信学完今天的内容，会对响应式机制有更深地体会；文章会结合代码示例，帮大家掌握响应式机制的进阶用法，让我们正式开始学习吧2022-09-09
这篇文章主要介绍了Vue在自定义指令绑定的处理函数中传递参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
background是background-color,background-image,background-repeat,background-attachment,background-position,background-size等属性的缩写,本文我用动态绑定background-image来举例,感兴趣的朋友跟随小编一起看看吧2023-10-10
最新评论