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属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在正式使用Vue进行移动端页面开发前,需要做一些前置工作,下面这篇文章主要给大家介绍了关于vue开发移动端h5环境搭建的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-08-08
这篇文章主要给大家介绍了关于vue3 Table分页保留选中状态的相关资料,vue table组件是一个非常方便的表格组件,它可以帮助我们实现分页和选中功能,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue3 element-plus如何使用icon图标组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
小编最近在做一个vue前端项目，需要实现弹窗的拖拽，四边拉伸及对角线拉伸，以及弹窗边界处理功能，本文通过实例代码给大家分享我的实现过程及遇到问题解决方法，感兴趣的朋友一起看看吧2021-08-08
这篇文章主要介绍了ElementUI多个子组件表单实现方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要给大家介绍了关于如何通过Vue3+Element Plus自定义弹出框组件的相关资料,弹窗是前端开发中的一种常见需求,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-05-05
下面小编就为大家分享一篇ajax请求+vue.js渲染+页面加载的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue项目中components组件(模板)的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
今天小编就为大家分享一篇使用淘宝镜像cnpm安装Vue.js的图文教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了vue中如何安装使用jquery的教程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论