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

什麼是插槽?插槽的指令為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!

推薦閱讀: