Vue之Componet之作用域slot(030)
阿新 • • 發佈：2021-05-07
Vue之Componet之作用域slot
1.元件內有插槽，且插槽內有預設值，不用作用域插槽時，會按元件原樣展示。完整程式碼：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="../js/vue.js"></script> <title>slot02</title> </head> <body> <!--例項--> <div id="app"> <child></child> </div> <!--子元件template,且slot內有預設內容--> <template id="childTemplate"> <slot> <div> {{firstName}}-{{lastName}} </div> </slot> </template> <script> //定義子元件 Vue.component("child", { template: "#childTemplate", data() { return { firstName: "li", lastName: "san" } } }) //root new Vue({ el: "#app" }) </script> </body> </html>
執行結果：
如果想改變插槽原來顯示樣式就要用到作用域插槽。更改程式碼：
在子元件的模板裡自定義屬性用來繫結資料。
<!--子元件template,且slot內有預設內容--> <template id="childTemplate"> <slot :fn="firstName" :ln="lastName"> <div> {{firstName}}-{{lastName}} </div> </slot> </template>
在父元件模板裡，用v-slot=“name” 來接收子元件的資料。名字自定義。
<div id="app"> <child> <template v-slot="name"> <div> <span>your firstName is :{{name.fn}}</span> <span>your lastName is :{{name.ln}}</span> </div> </template> </child> </div>
執行結果：
總結：
1.在子元件的模板裡自定義屬性用來繫結資料。
2.在父元件模板裡，用v-slot=“name” 來接收子元件的資料。名字自定義。
3.如果是具名插槽，s-slot:插槽名=自定義變數。