關於VUE的編譯作用域及slot作用域插槽問題

Posted on by

什麼是插槽？插槽的指令為v-slot，它目前取代瞭slot和slot-scope，插槽內容，vue實例一套內容分發的api，將slot元素作為承載分發內容的出口。

插槽分為單個插槽，具名插槽，還有作用域插槽，前兩種比較簡單這裡就不贅述瞭，今天的重點是討論作用域插槽。
簡單來說，前兩種插槽的內容和樣式皆由父組件決定，也就是說顯示什麼內容和怎樣顯示都由父組件決定；
作用域插槽的樣式由父組件決定，內容卻由子組件控制。簡單來說：前兩種插槽不能綁定數據，作用域插槽是一個帶綁定數據的插槽。

下面給大傢介紹VUE的編譯作用域及slot作用域插槽問題，一起看看吧！

其實就是 如果有很多個組件 ，當你在組件 使用變量的時候 ，那麼你變量的作用域其實就也是在他定義的代碼中找，如果沒找到，那麼就報錯，【這個很基礎的 是人都看出的】

官方說：父組件模板的所有東西都會在父級作用域內編譯；子 組件模板的所有東西都會在子級作用域內編譯。

下面例子完美說明瞭：

作用域插槽是slot一個比較難理解的點這裡需要細心理解：

我現在說下軟件需求目標：

子組件中有一組數據：比如：pLanguages: [‘JavaScript’, ‘Python’, ‘Swift’, ‘Go’, ‘C++’]，我要他在子組件的插槽中 ，有的用列表顯示，有的用 – 鏈接、有的用 * 鏈接。

先看源代碼（未使用插槽，寫死的，在這個代碼中改寫 使用插槽作用域）：

源代碼：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>購物車</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
            <!-- 未使用插槽 下面模板是寫死的 -->
        <template id="cpn">
                <div>
                	<ul>
                    <li v-for=" item in pLanguages">{{item}}</li>
                	</ul>
                </div>
        </template>

        <div id="app">
              <cpn></cpn>
        </div>


        
        <script>
            const app = new Vue({
                el: "#app",
                components: {
                    'cpn': {
                        template: "#cpn",
                        data() {
                            return {
                                pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
                            }
                        }
                    }
                }
            })
        </script>

    </body>
</html>

那麼如果用插槽：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>購物車</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
            <!-- 使用 瞭 插槽 且 下面設置瞭 插槽slot 默認值 -->
        <template id="cpn">
              <div>
               <slot>       <!-- 已改動 -->
                   <ul>
                       <li v-for=" item in pLanguages">{{item}}</li>
                   </ul>
               </slot>
              </div>
        </template>

        <div id="app">
              <cpn></cpn>           <!-- 使用默認值 列表的形式 -->
              <cpn>          <!-- 已改動 -->
              
                    <!-- 問題就在這裡 我想要以 - 鏈接的方式展現cpn組件中data中的數據，我無法獲取，
                    因為作用域，這裡的作用域是Vue實例app的！ 隻能獲取到Vue實例app的data！
                     所以 下面這句代碼是錯的！！！ 所以怎麼解決插槽代碼獲取子組件中的data呢？
                     -->
                    
                    <span v-for="item in pLanguages">{{item + "-"}}</span>
                    
              </cpn>
        </div>


        
        <script>
            const app = new Vue({
                el: "#app",
                components: {
                    'cpn': {
                        template: "#cpn",
                        data() {
                            return {
                                pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
                            }
                        }
                    }
                }
            })
        </script>

    </body>
</html>

代碼已經在裡面很詳細的說明瞭，問題也標註出來瞭，簡而言之：

因為不在子組件的作用域，怎麼解決插槽代碼獲取子組件中的data呢？

解決方案： 利用slot作用域插槽

到此這篇關於VUE 的 編譯作用域 以及 slot作用域插槽的文章就介紹到這瞭,更多相關vue作用域插槽內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：