Vuejs學習筆記(二)-13.插槽作用域
阿新 • • 發佈：2021-07-05
一、什麼是編譯作用域
官方準則：父元件模板的所有內容都會在父級作用域內編輯，子元件模板所有內容會在子級作用域內編譯。
舉個例子,在父元件Vue例項內定義一個變數 isShow=true，在子元件內也定義一個變數isShow=false，現在在父元件模板內的子元件中使用使用isShow，那麼現在用的是哪一個值？按照官方準則，在父元件模板中用的就是父元件Vue例項中的變數，所以isShow=true
程式碼如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5<title>04 編譯作用域</title> 6 </head> 7 <body> 8 <div id="app"> 9 <h2>{{ message }}</h2> 10 <cpn1 v-show="isShow"></cpn1> 11 </div> 12 13 <!--div id='app'中的isShow會去APP對應的VUE例項中查詢--> 14 15 <template id="cpn1"> 16 <div v-show="isShow"> 17<h2>我是子元件1</h2> 18 </div> 19 </template> 20 <script src="../js/vue.js"></script> 21 <script> 22 const cpn1 = { 23 template: '#cpn1', 24 data(){ 25 return { 26 isShow:false 27 } 28 } 29 } 30 31 const app = new Vue({ 32 el: '#app',33 data: { 34 message: 'hello', 35 isShow: true 36 }, 37 components: { 38 cpn1 39 } 40 }) 41 </script> 42 </body> 43 </html>
介面如下：
子元件在介面顯示
本文來自部落格園，作者：kaer_invoker，轉載請註明原文連結：https://www.cnblogs.com/invoker2021/p/14971991.html