vue official website API:
Slot: https://cn.vuejs.org/v2/guide/components-slots.html
JSX:https://cn.vuejs.org/v2/guide/render-function.html
Description: vue version 2.6.0 above grammar
A slot template by value
Subcomponents: child.vue
<template> <div> <!-- 默认插槽 --> <slot :info="info"></slot> <!-- other插槽 --> <slot name="other" :info="info2"></slot> </div> </template> <script> export default { data() { return { info: { title: " Title I " }, info2: { title: " Title II " } }; } }; </script>
Parent component: parent.vue
<child> <template v-slot:default="slotProps"> <div> {{ slotProps.info.title }} </div> </template> <template v-slot:other="slotProps"> <div> {{ slotProps.info.title }} </div> </template> </child>
result:
Second, the value of the slot pass JSX wording
Subcomponents: child.jsx
export default { data() { return { info: { title: "Title I" }, info2: { title: "Title II" } }; }, render() { return ( <div> {this.$scopedSlots.default({ info: this.info })} {this.$scopedSlots.other({ info: this.info2 })} </div> ); } };
Parent component: parent.jsx
<child scopedSlots={{ default: props => { return ( <div style="line-height: 30px;"> {props.info.title} </div> ); }, other: props => { return ( <div style="line-height: 30px;"> {props.info.title} </div> ); } }} />
result: