插槽slot
阿新 • • 發佈：2022-03-04
v-bind和v-on的簡寫：
<body> <div id="app"> <todo> <todo-title slot="todo-title" :title="titleName"></todo-title> <todo-book slot="todo-book" v-for="books in bookName" :book="books"></todo-book> </todo> </div> <!--匯入Vue--> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> <script> Vue.component("todo",{ template:'<div>' + '<slot name="todo-title" ></slot>'+ '<ul>'+ '<slot name="todo-book"></slot>'+ '</ul>'+ '</div>' }); Vue.component("todo-title",{ props: ['title'], template:'<div>{{title}}</div>' }); Vue.component("todo-book",{ props:['book'], template:'<li>{{book}}</li>' }); var vm=new Vue({ el: "#app", data:{ titleName:"四大名著", bookName:['水滸傳','西遊記','三國演義','紅樓夢'] } }); </script> </body>