首先，需要知道的是，每個組件有每個組件自己的作用域。每個組件都是Vue()的實例，有自己的作用域。

比如現在有個組件這樣的：

Vue.component('father-component1',{  template:'<div class="father"><p>Hi,我是父組件</p>{{fatherMessage}}</div>',  data:function(){   return {     fatherMessage:'這是父組件發出的消息哦~'   }  },});

這個data只為template里的模板服務。同樣的，子組件的data只為子組件的模板服務。因為他們都是各自作用域內的屬性。

在slot分發中，無論是單分發還是具名分發，都是父組件替換子組件的數據，或者沒有替換，用子組件默認的數據。兩者并不能共存。這樣他們就沒有數據聯系了。

但是通過設置作用域槽，就可以改變這種狀況，讓子組件可以在父組件進行分發時獲取自己的數據，至于是什么數據，由子組件決定，這樣就能解耦了。

作用域槽通過slot的一個自定義的屬性，官方給出的DEMO是text，但也可以是其他，值為暴露的數據。

這個自定義屬性已經存放在子組件的prop對象里了。等待著被父組件獲取。

怎么獲取呢？

在父組件的模板里，使用一個Vue自帶的特殊組件<template> ，并在該組件上使用scope屬性，值是一個臨時的變量，存著的是由子組件傳過來的prop對象，在下面的例子中我把他命名為props。

獲得由子傳過來的prop對象。這時候，父組件就可以訪問子組件在自定義屬性上暴露的數據了。

//jsVue.component('child-component4',{  template:'<ul>' +  '<slot name="child-ul" v-for="item in fruit" v-bind:text="item.name">?</slot>' +  '</ul>',  data:function(){   return {     fruit:[       {name:'蘋果'},       {name:'香蕉'},       {name:'橙子'}     ]   }  },});Vue.component('father-component4',{  template:'<child-component4>' +  '<template scope="props" slot="child-ul">' +  '<li class="child-li" >{{props.text}}</li>' +  '</template>' +  '</child-component4>'});var app16 = new Vue({  el:'#app16'});<div id="app16">  <father-component4></father-component4></div>

以上的的組件組合會被渲染為：

<div id="app16"><ul>  <li class="child-li">蘋果</li>  <li class="child-li">香蕉</li>  <li class="child-li">橙子</li></ul></div>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。