使用slot分發內容 作用域插槽
阿新 • • 發佈:2017-05-23
沒有 數據 臨時變量 使用 數據傳遞 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分發內容 作用域插槽