腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Vue2.0 slot分發(fā)內(nèi)容與props驗證的方法

更新時間：2017年12月12日 09:23:39 作者：范小飯_

本篇文章主要介紹了Vue2.0 slot分發(fā)內(nèi)容與props驗證的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

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

概述：

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

默認(rèn)情況下

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

例如代碼：

<div id="app"> 
  <children> 
    <span>12345</span> 
    <!--上面這行不會顯示--> 
  </children> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    components: { 
      children: {  //這個無返回值，不會繼續(xù)派發(fā) 
        template: "<button>為了明確作用范圍，所以使用button標(biāo)簽</button>" 
      } 
    } 
  }); 
</script>

顯示內(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替換。

<div id="app">
  <h2>自定義組件</h2>
  <custom>
   <!-- 當(dāng)卸載自定義標(biāo)簽之前的內(nèi)容，要混合子組件中的模板 -->
   <div>我是父組件提供的內(nèi)容，我的存在會替換子組件中slot標(biāo)簽內(nèi)的內(nèi)容</div> 
  </custom>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
 Vue.component('custom',{
  template:`
   <div>
    <slot>
     <div>我備用內(nèi)容，如果子組件中有內(nèi)容會替換我哦~</div>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app"
 })
</script>

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

單個slot.png

二、有具體名稱的slot

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

<div id="app">
  <h2>自定義組件</h2>
  <custom>
   <!-- <div slot="one">我替換one</div> -->
   <div slot="three">我替換three</div>
   <div slot="two">我替換two</div>
   <span slot="two">我替換two</span>
   <div slot="one">我替換one</div>
  </custom>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
 Vue.component('custom',{
  template:`
   <div>
    <slot name="one"> 
     <p>我是one</p>
    </slot>
    <slot name="two">
     <p>我是two</p>
    </slot>
    <slot name="three">
     <p>我是three</p>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app"
 })
</script>

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

具名slot.png

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

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

 <div id="app">
  <h2>自定義組件</h2>
  <custom>
   <!-- <div slot="one">我替換one</div> -->
   <div slot="three">我替換three</div>
   <div slot="two">我替換two</div>
   <span slot="two">我替換two</span>
   <div slot="one">我替換one</div>
   <div>替換無名的slot</div>
   <div>替換無名的slot</div>
   <div>替換無名的slot</div>
  </custom>
 </div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
 Vue.component('custom',{
  template:`
   <div>
    <slot name="one"> 
     <p>我是one</p>
    </slot>
    <slot name="two">
     <p>我是two</p>
    </slot>
    <slot name="three">
     <p>我是three</p>
    </slot>
    <slot>
     <p>我是無名的slot</p>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app"
 })
</script>

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

匿名slot.png

三、編譯作用域

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

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

<div id="app">
  <h2>自定義組件</h2>
  <custom>
   <!-- 渲染的數(shù)據(jù)，是父組件中的數(shù)據(jù)，如果想使用子組件中的數(shù)據(jù)，就在子組件中建立自己的數(shù)據(jù) -->
   {{message}}
  </custom>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
 Vue.component('custom',{
  data(){
   return {
    message:"我是子組件的數(shù)據(jù)"
   }
  },
  template:`
   <div>
    <p>我是{{message}}</p>
    <slot>
    // 這的內(nèi)容會被父組件中內(nèi)容替換
     <p> {{message}}</p>
    </slot>
   </div>
  `
 })
 new Vue({
  el:"#app",
  data:{
   message:"我是父組件的數(shù)據(jù)"
  }
 })
</script>

頁面渲染

編譯作用域.png

運(yùn)用了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:`
    <div>
     <h2>我是一個自定義組件</h2>
     <input type='button' value="改變count的值" @click="changeCount">
     {{incrementCount}}
    </div>
  `,
  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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: