快捷導(dǎo)航

VUE中Non-Props屬性的使用

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

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

定義

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

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

父組件向子組件傳值，子組件通過props接收父組件傳遞過來的數(shù)據(jù)，但是子組件沒有使用這個(gè)傳遞過來的數(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上多了一個(gè)msg='hello'

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

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

子組件<div>Counter</div>

替換了

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

同時(shí)將msg='hello'屬性放到子組件的DOM標(biāo)簽上了

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

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

假如子組件并不想在它最外層的DOM標(biāo)簽上展示，父組件傳遞過來的屬性和值呢？

==> 那你子組件就加一個(gè)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')

嗯~，你確實(shí)做到了

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

額..，好像真的沒啥太大作用。但是當(dāng)父組件想給子組件添加style行內(nèi)樣式或者class樣式還是有用的嘛，強(qiáng)行洗白？

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

子組件有多個(gè)根節(jié)點(diǎn)？

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

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

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

那就在子組件的其中一個(gè)根節(jié)點(diǎn)使用v-bind="$attrs"吧

它的意思是子組價(jià)繼承父組件上所有的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')

當(dāng)然如果子組件只是想繼承父組件其中的某個(gè)non-props屬性也是可以的，畢竟“弱水三千，只取只取一瓢”，方法就是 v-bind:msg="$attrs.msg",通過在其中一個(gè)根節(jié)點(diǎn)上綁定動(dòng)態(tài)屬性(之所以加:，是因?yàn)榈忍?hào)后面是JS表達(dá)式，不是字符串)

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

運(yùn)行結(jié)果