Vue的作用域插槽
阿新 • • 發佈：2018-11-22
type dev 靈活性 author width style 1.0 tle 情況下
一、通常情況下都是父組件傳遞數據給子組件進行展示的（無法改變子組件的展示方式）；而作用域插槽允許子組件通過slot向父組件傳遞數據，類似React中的“以函數為子組件”，由父組件決定渲染的內容（包含綁定事件，樣式，HTML標簽等）；我把數據給你父組件了，你愛怎麽處理就怎麽處理，極大的提高了靈活性。
二、示例代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" /> <title>Vue作用域插槽2</title> <script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script> </head><body> <div id="root"> <my-list :books="books"> <template slot-scope="scope" slot="book"> <li>{{scope.book.author}}--{{scope.book.name}}</li> </template> </my-list> </div> <script> Vue.component(‘my-list‘,{ props: { books: { type: Array, default: () => [] } }, template: ` <ul> <slot v-for="item in books" name="book" :book="item"></slot> </ul> ` }) var app = new Vue({ el: ‘#root‘, data: { books: [ { id: 1, author: ‘李四‘, name: ‘《Vue. js 實戰》‘ }, { id: 2, author: ‘王五‘, name : ‘《 JavaScript 語言精粹》‘ }, { id: 3, author: ‘張三‘, name : ‘《 JavaScript 高級程序設計》‘ } ] } }) </script> </body> </html>
Vue的作用域插槽