關(guān)于VUE的編譯作用域及slot作用域插槽問題

更新時間：2021年07月26日 12:07:17 作者：Bi-Hu

這篇文章主要介紹了VUE 的編譯作用域及slot作用域插槽問題，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

什么是插槽？插槽的指令為v-slot，它目前取代了slot和slot-scope，插槽內(nèi)容，vue實例一套內(nèi)容分發(fā)的api，將slot元素作為承載分發(fā)內(nèi)容的出口。

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

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

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

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

下面例子完美說明了：

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

我現(xiàn)在說下軟件需求目標：

子組件中有一組數(shù)據(jù)：比如：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>          <!-- 已改動 -->
              
                    <!-- 問題就在這里 我想要以 - 鏈接的方式展現(xiàn)cpn組件中data中的數(shù)據(jù)，我無法獲取，
                    因為作用域，這里的作用域是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>

代碼已經(jīng)在里面很詳細的說明了，問題也標注出來了，簡而言之：

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

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

到此這篇關(guān)于VUE 的編譯作用域以及 slot作用域插槽的文章就介紹到這了,更多相關(guān)vue作用域插槽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: