vue slot插槽理解
阿新 • • 發佈：2019-02-08
新手上路,根據vue官方手冊記錄學習內容,主要知識點如下.
- 插槽內容
- 命名插槽
- 預設插槽內容
- 插槽作用域
插槽內容
插槽是用於向子元件分發內容的,當在父元件中應用子元件時,子元件標籤內的內容會分發到子元件模板中具有slot標籤的位置.(如果子元件模板中沒有slot標籤,父元件裡子元件標籤內的內容會全部被丟棄掉的.)
原始碼:
<body>
<template id="model">
<div>
<p>我是model元件的內容</p>
</div 命名插槽(具名插槽)
在某些地方需要用到多個插槽,就可以利用slot標籤的的特殊屬性name,使之與父元件中需要分發的內容通過slot=”name屬性值”.產生關聯.
原始碼:
<body>
<template id="model">
<div 預設插槽內容
當有些場景需要插槽預先提供預設內容.(如果父元件模板中，向 slot 位置提供了內容，子元件 slot 元素的預設內容就會被替換。)
<body>
<template id="model">
<div>
<slot>我是插槽預設內容</slot>
</div>
</template>
<div id="app">
<model></model>
</div>
</body>
渲染結果:
<div id="app">
<div>我是插槽預設內容</div>
</div>插槽作用域
插槽都是向下分發內容, 作用域插槽實現了子元件向父元件傳遞資料((2.5.+在父元件無論什麼標籤都能接受slot-scope,不僅侷限在template標籤上).
<body>
<template id="model">
<div>
<slot v-bind:arr="list"></slot>
</div>
</template>
<div id="app">
<model>
<p slot-scope="slotname">{{slotname.arr}}</p>
</model>
</div>
</body>
<script>
var model = {
template: "#model",
data: function () {
return {
list: "lalala"
}
}
}
var vm = new Vue({
el: "#app",
components: {
"model": model
}
})
</script>
渲染結果:
<div id="app">
<div>
<p>lalala</p>
</div>
</div>注意點:
編譯作用域:父元件模板的內容只在父元件作用域內編譯.子元件模板的內容只在子元件作用域內編譯.
eg:
<body>
<template id="model">
<div>
<slot></slot>
</div>
</template>
<div id="app">
<model>
<p>{{gender}}</p>
</model>
</div>
</body>
<script>
var model = {
template: "#model",
}
var vm = new Vue({
el: "#app",
data: function () {
return {
gender: "男"
}
},
components: {
"model": model
}
})
</script>
渲染結果:
<div id="app">
<div>
<p>男</p>
</div>
</div>