VUE中Non-Props屬性的使用

更新時間：2023年05月29日 10:12:07 作者：一直酷下去

本文主要介紹了VUE中Non-Props屬性的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

定義

父組件通過在子組件上定義屬性的方式，向子組件傳遞數(shù)據(jù)，但是子組件不寫接收數(shù)據(jù)的語法props

子組件props接收數(shù)據(jù)，但是不使用

父組件向子組件傳值，子組件通過props接收父組件傳遞過來的數(shù)據(jù)，但是子組件沒有使用這個傳遞過來的數(shù)據(jù)

 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結(jié)構(gòu)

子組件不寫props

const app = Vue.createApp({
    template:`
    <div>
        <counter msg='hello'/>
    </div>
    `
})
app.component('counter',{
    template:`<div>Counter</div>`
})
const vm = app.mount('#root')

我們發(fā)現(xiàn)，子組件的div上多了一個msg='hello'

當使用non-props特性的時候，也就是父組件通過給子組件上添加屬性來傳遞數(shù)據(jù)，但是子組件不寫props接收父組件傳遞過來的數(shù)據(jù)的時候，它會把父組件傳遞過來的內(nèi)容(在子組件上綁定的屬性連同值一起)，放到子組件最外層的DOM標簽上，變成子組件最外層DOM標簽的一個屬性。

相當于發(fā)生了這樣的過程：

子組件<div>Counter</div>

替換了

父組件引用子組件 <counter msg='hello'/>

同時將msg='hello'屬性放到子組件的DOM標簽上了

變成了<div msg='hello>Counter</div>

子組件拒絕“被迫營業(yè)”？

假如子組件并不想在它最外層的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')

嗯~，你確實做到了

實際開發(fā)中有啥用呢？

額..，好像真的沒啥太大作用。但是當父組件想給子組件添加style行內(nèi)樣式或者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')

子組件有多個根節(jié)點？

結(jié)果就是non-props不會作用于任何一個節(jié)點，以免多個節(jié)點"暴力爭搶"

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')

如果就是有“私心”，就是想指定子組件某個節(jié)點繼承父組件全部的non-props呢？

那就在子組件的其中一個根節(jié)點使用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",通過在其中一個根節(jié)點上綁定動態(tài)屬性(之所以加:，是因為等號后面是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')

運行結(jié)果