使用一種方式混合父組件的內(nèi)容與子組件自己的模板，這個過程被稱為“內(nèi)容分發(fā)”。在子組件中使用特殊的元素作為內(nèi)容的插槽。

在昭化等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站設(shè)計制作、網(wǎng)站設(shè)計 網(wǎng)站設(shè)計制作定制開發(fā),公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站制作,營銷型網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站建設(shè),昭化網(wǎng)站建設(shè)費用合理。

Slot分發(fā)內(nèi)容

概述：

簡單來說，假如父組件需要在子組件內(nèi)放一些DOM，那么這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示，就是slot分發(fā)負(fù)責(zé)的活。

默認(rèn)情況下

父組件在子組件內(nèi)套的內(nèi)容，是不顯示的。

例如代碼：

 
   
    12345 
     
   
 
 

顯示內(nèi)容是一個button按鈕，不包含span標(biāo)簽里面的內(nèi)容；

一、單個slot

在子組件模板中有slot標(biāo)簽，被視為備用內(nèi)容，在父組件不提供內(nèi)容的情況下使用。如果父組件提供內(nèi)容，則把整個內(nèi)容片段插入到slot所在的DOM位置，并替換掉slot標(biāo)簽本身。

子組件模板中沒有slot標(biāo)簽，父組件提供的內(nèi)容會被拋棄

如果替換的內(nèi)容較多，可以直接用一個template替換。

  
自定義組件
  
   
   
我是父組件提供的內(nèi)容，我的存在會替換子組件中slot標(biāo)簽內(nèi)的內(nèi)容
 
  

見證奇跡的時候到了，頁面上會顯示如下內(nèi)容

單個slot.png

二、有具體名稱的slot

元素可以用一個特殊的屬性name來配置如何分發(fā)內(nèi)容。

  
自定義組件
  
   
   
我替換three
   
我替換two
   我替換two
   
我替換one
  

你猜頁面上會顯示什么？猜對了我就告訴你-。-

具名slot.png

是不是被順序驚到了，這是因為頁面會根據(jù)子組件中slot的順序去替換內(nèi)容并渲染頁面。

可以使用一個匿名的slot，處理那些沒有對應(yīng)slot的內(nèi)容

 

  
自定義組件
  
   
   
我替換three
   
我替換two
   我替換two
   
我替換one
   
替換無名的slot
   
替換無名的slot
   
替換無名的slot
  
 

匿名的slot就會被那些沒有對應(yīng)slot的內(nèi)容替換。

匿名slot.png

三、編譯作用域

父組件模板的內(nèi)容在父組件作用域內(nèi)編譯

子組件模板的內(nèi)容在子組件作用域內(nèi)編譯

  
自定義組件
  
   
   {{message}}
  

頁面渲染

編譯作用域.png

運用了slot分發(fā)，使我們對組件的應(yīng)用更加靈活。

單向數(shù)據(jù)流

數(shù)據(jù)從父組件傳遞給子組件，只能單項綁定。

在子組件內(nèi)不應(yīng)該修改父組件傳遞過來的數(shù)據(jù)。

改變prop的情況：

1.作為data中局部數(shù)據(jù)的初始值使用

2.作為子組件中computed屬性

props 驗證

我們在父組件給子組件傳值得時候，為了避免不必要的錯誤，可以給prop的值進(jìn)行類型設(shè)定，讓父組件給子組件傳值得時候，更加準(zhǔn)確

  props:{
  propA:Number, 數(shù)值類型
  propB:[String,Number], 多種類型
  propC:{type:String,required:true}, 必填項
  propD:{type:Number,default:100}, 默認(rèn)是
  propE:{typr:Number,default:function(){return 1000}}
  propF:{validator:function(value){return value>2}} 符合value>2的值
  }

不明白，看如下案例，要求父組件給子組件傳值得時候

1、這個參數(shù)是必須傳的

2、值必須是數(shù)值類型的

3、默認(rèn)參數(shù)是10

 Vue.component('custom-cmpontent',{
  data(){
   return {
    incrementCount:this.count //作為局部組件的data的初始值
   }
  },
  props:{
   count:{
    type:Number, // 類型
    default:10, // 默認(rèn)值
    required:true //必須要傳參數(shù)
   }
  },
  computed:{
   incrementCount2(){
    return this.incrementCount
   }
  },
  template:`
    

     
我是一個自定義組件
     
     {{incrementCount}}
    
  `,
  methods:{
   changeCount:function(value){
    this.incrementCount++;
    this.$emit('receive')
   }
  }
 })
 new Vue({
  el:"#app",
  data:{
   count:0
  },
  methods:{
   countH:function(){
    this.count++;
   }
  }
 })

那如果我們給子組件傳值得時候，傳過去的是一個字符串，就會報錯

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。