12.在vue中插槽(slot)
父元件怎樣優雅的向子元件傳遞dom結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元件的插槽(slot)</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="root">
<!-- <child content="<p>Dell</p>">
</child> -->
<child >
<p>Dell</p>
</child>
</div>
<script>
Vue.component('child',{
props:['content'],
template:'<div> <p>Dell</p> <slot>預設內容</slot> </div>'
})
var app = new Vue({
el:'#root'
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元件的插槽(slot)</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="root">
<!-- <child content="<p>Dell</p>">
</child> -->
<body-content >
<div class="header" slot="header">header</div>
<div class="footer" slot='footer'>footer</div>
</body-content>
</div>
<script>
Vue.component('body-content',{
props:['content'],
template:'<div> <slot name="header"> </slot> Dell <slot name="footer"> </slot> </div>'
})
var app = new Vue({
el:'#root'
})
</script>
</body>
</html>
3.作用域插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元件的插槽(slot)</title>
<!--引入/vue.js-->
<script src="./vue.js"> </script>
</head>
<body>
<div id="root">
<!-- <child content="<p>Dell</p>">
</child> -->
<body-content >
<!-- 作用域插槽必須使用template標籤,資料放在props,應該怎樣展示 -->
<template slot-scope="props">
<li>{{props.item}}-hello</li>
</template>
</body-content>
</div>
<script>
Vue.component('body-content',{
data:function(){
return{
list:[1,2,3,4]
}
},
template:'<div> <ul> <slot v-for="item of list":item=item> {{item}} </slot"> </ul> </div>'
})
var app = new Vue({
el:'#root'
})
</script>
</body>
</html>
相關文章
- vue插槽slotVue
- VUE 插槽 slotVue
- [vue] 插槽 slotVue
- Vue 作用域插槽slotVue
- 對Vue插槽slot的理解Vue
- Vue(14)slot插槽的使用Vue
- Vue 插槽(slot)使用(通俗易懂)Vue
- 8.Vue元件三---slot插槽Vue元件
- 初識 Vue(19)---(Vue 中使用插槽(slot))Vue
- Vue作用域插槽 :slot-scope 例項Vue
- Vue 開發之插槽(slot)的理解和使用Vue
- vue2.6之後的 v-slot插槽Vue
- vue.js-使用slot插槽分發內容Vue.js
- Vue 中的 slotVue
- Vue.js——slot-插槽的基本使用——2020.12.7Vue.js
- vue 元件中solt 插槽使用Vue元件
- 詳解Vue中的插槽Vue
- 深入理解vue中的slot與slot-scopeVue
- 「Vue原始碼學習」你真的知道插槽Slot是怎麼“插”的嗎Vue原始碼
- vue元件化中slot的用法Vue元件化
- [Vue] slot詳解,slot、slot-scope和v-slotVue
- vue。js插槽VueJS
- vue slot 用法Vue
- Vue中使用插槽Vue
- Vue slot的用法Vue
- Vue 插槽之插槽內容學習總結Vue
- 關於Vue中插槽的理解和總結Vue
- 請你說說 Vue 中 slot 和 slot-scope 的原理(2.6.11 深度解析)Vue
- vue基礎-元件&插槽Vue元件
- 06 Vue3插槽Vue
- 細談 vue - slot 篇Vue
- Vue 插槽 廢棄語法Vue
- Vue元件深入理解--插槽Vue元件
- vue的內建元件slotVue元件
- 12. Vue搭建本地服務Vue
- slot 插槽筆記(與文件基本沒差別,僅作學習記錄)筆記
- 【Vue學習(二)元件和插槽】Vue元件
- Vue 元件化開發之插槽Vue元件化