1. 程式人生 > >使用slot分發內容 作用域插槽

使用slot分發內容 作用域插槽

沒有 數據 臨時變量 使用 數據傳遞 one 分發 接受 組件

除非子組件模板包含至少一個<slot>插口,否則父組件的內容將會別丟棄。當子組件模板只有一個沒有屬性的slot時,父組件整個內容片斷將插入到slot所在的DOM位置,並替換掉slot標簽本身。

最初在 <slot> 標簽中的任何內容都被視為備用內容。備用內容在子組件的作用域內編譯,並且只有在宿主元素為空,且沒有要插入的內容時才顯示備用內容。

作用域插槽是一種特殊類型的插槽,用作使用一個(能夠傳遞數據到)可重用模板替換已渲染元素。

在子組件中,只需將數據傳遞到插槽,就像你將 prop 傳遞給組件一樣:

在父級中,具有特殊屬性scope的<template>元素,表示它是作用域插槽的模板,scope的值對應一個臨時變量名,此變量接受從子組件傳遞的prop對象

demo:

var app=new Vue({

  el:‘#app‘,

  components:{      

    ‘scope-component2‘:{
        template:‘<div><p>this is a child</p><slot text="this info from child"></slot></div>‘

    }

  }
});

html

<scope-component2>
      <template scope="props">
        <
p>{{props.text}}</p> </template> </scope-component2>

使用slot分發內容 作用域插槽