VUE 插槽 slot
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id='app'>
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="todoItems" :item="item"></todo-items>
</todo>
</div>
<script>
// slot 插槽
Vue.Component("todo",{
template: '<div>\
<slot name ="todo-title"></slot>\
<ul>\
<slot name-"todo-items"></slot>\
</ul>\
</div>'
});
Vue.component("todo-title",{
props:['title'],
template:'<div>{{title}}</div>'
});
Vue.component("todo-items",{
props:['item'],
template:'<li>{{item}}</li>'
});
var vm = new Vue({
el:"#app",
data:{
title:"學習VUE",
todoItems:['學習VUE','學習angular','學習react']
}
});
</script>
</body>
</html>
配合上潦草的圖片更容易食用~
相關文章
- vue插槽slotVue
- [vue] 插槽 slotVue
- Vue 作用域插槽slotVue
- 對Vue插槽slot的理解Vue
- Vue(14)slot插槽的使用Vue
- Vue 插槽(slot)使用(通俗易懂)Vue
- 8.Vue元件三---slot插槽Vue元件
- 12.在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.js——slot-插槽的基本使用——2020.12.7Vue.js
- 「Vue原始碼學習」你真的知道插槽Slot是怎麼“插”的嗎Vue原始碼
- [Vue] slot詳解,slot、slot-scope和v-slotVue
- vue。js插槽VueJS
- vue slot 用法Vue
- Vue中使用插槽Vue
- Vue slot的用法Vue
- Vue 中的 slotVue
- Vue 插槽之插槽內容學習總結Vue
- vue基礎-元件&插槽Vue元件
- 06 Vue3插槽Vue
- 細談 vue - slot 篇Vue
- 深入理解vue中的slot與slot-scopeVue
- Vue 插槽 廢棄語法Vue
- vue 元件中solt 插槽使用Vue元件
- 詳解Vue中的插槽Vue
- Vue元件深入理解--插槽Vue元件
- vue的內建元件slotVue元件
- slot 插槽筆記(與文件基本沒差別,僅作學習記錄)筆記
- 【Vue學習(二)元件和插槽】Vue元件
- Vue 元件化開發之插槽Vue元件化
- vue元件化中slot的用法Vue元件化
- vue函式元件,slot分發,只實現default slot的問題Vue函式元件
- vue作用域插槽,你真的懂了嗎?Vue
- Vue元件、元件傳值和元件插槽Vue元件