<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                [TOC] >[success] # Non-Props 屬性是什么 1. **inheritAttrs** :**不接收父組件傳入的屬性** 2. **$attrs**: **接收父組件傳入的所有屬性** 3. **$attrs.傳遞過來的屬性**: **按需來顯示,要顯示的屬性** 4. 在 **生命周期** 中使用 **$attrs** >[success] ## inheritAttrs 如果 **父組件傳值,子組件不接收的話,它會把父組件傳遞過來的內容放在子組件最外層的標簽上,變成dom標簽的一個屬性** ,如下代碼: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Non-Props 屬性是什么</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // Non-prop 屬性 const app = Vue.createApp({ template: ` <div> <counter msg="hello"/> </div>` }) // 子組件未用props接收msg app.component('counter', { template: '<div>Counter</div>' }) const vm = app.mount('#root') </script> </html> ~~~ **子組件在瀏覽器上就會被渲染** 成這樣: ~~~ <div id="root" data-v-app=""> <div> <!-- 這里會多個msg屬性這是因為子組件沒有接收父組件傳過來的屬性 --> <div msg="hello">Counter</div> </div> </div> ~~~ 如果你 **不希望渲染時標簽上有這樣的屬性** ,可以 **在子組件中添加 inheritAttrs 屬性,意思是不繼承父組件傳過來的props屬性** 。 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Non-Props 屬性是什么</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // Non-prop 屬性 const app = Vue.createApp({ template: ` <div> <counter msg="hello"/> </div>` }) // 子組件未用props接收msg app.component('counter', { inheritAttrs: false, // 不繼承父組件傳過來的props屬性 template: '<div>Counter</div>' }) const vm = app.mount('#root') </script> </html> ~~~ 這樣寫**渲染后子組件上就不會有父組件傳遞過來的屬性** 了,包括 **style,class** 也不會被傳遞過來。 >[success] ## $attrs **父組件傳遞給子組件的屬性(style、class等等)** 可以用 **指定給子組件的某個元素** ,如下代碼: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Non-Props 屬性是什么</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // Non-prop 屬性 const app = Vue.createApp({ data(){ return { num: 1 } }, template: ` <div> <counter style="color:red" class="div-style" msg="hello"/> </div>` }) app.component('counter', { template: ` <div>Counter</div> <div v-bind="$attrs">Counter</div> <div>Counter</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 渲染后的結果如下: ~~~ <div id="root" data-v-app=""> <div> <div>Counter</div> 因為子組件的v-bind="$attrs"是加到第二個元素身上了,所以渲染時都會添加到該標簽身上 <div class="div-style" msg="hello" style="color: red;">Counter</div> <div>Counter</div> </div> </div> ~~~ >[success] ## $attrs按需顯示 如果你 **只想在某個標簽身上顯示某個傳遞過來的屬性** ,你可以這樣寫: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Non-Props 屬性是什么</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // Non-prop 屬性 const app = Vue.createApp({ template: ` <div> <counter style="color:red" class="div-style" msg="hello"/> </div>` }) app.component('counter', { template: ` <div :style="$attrs.style">Counter</div> <div :class="$attrs.class">Counter</div> <div :msg="$attrs.msg">Counter</div> ` }) const vm = app.mount('#root') </script> </html> ~~~ 放到瀏覽器上渲染的結果就是這樣: ~~~ <div id="root" data-v-app=""> <div> <div style="color: red;">Counter</div> <div class="div-style">Counter</div> <div msg="hello">Counter</div> </div> </div> ~~~ >[success] ## 在生命周期中使用$attrs 我們除了可以 **在子組件內的標簽上使用 $attrs ,也可以在 mounted 生命周期中獲取到 $attrs** 代碼如下: **index.html** ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Non-Props 屬性是什么</title> <!-- 通過cdn方式引入vue --> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="root"></div> </body> <script> // Non-prop 屬性 const app = Vue.createApp({ template: ` <div> <counter style="color:red" class="div-style" msg="hello"/> </div>` }) app.component('counter', { mounted(){ console.log(this.$attrs.style) }, template: ` <div :style="$attrs.style">Counter</div> <div :class="$attrs.class">Counter</div> <div :msg="$attrs.msg">Counter</div> ` }) const vm = app.mount('#root') </script> </html> ~~~
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看