插槽：https://cn.vuejs.org/v2/guide/components-slots.html

JSX：https://cn.vuejs.org/v2/guide/render-function.html

说明：vue版本2.6.0以上语法

子组件：child.vue

<template> <div> <!-- 默认插槽 --> <slot :info="info"></slot> <!-- other插槽 --> <slot name="other" :info="info2"></slot> </div> </template> <script> export default { data() { return { info: { title: "标题一" }, info2: { title: "标题二" } }; } }; </script>

父组件：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>

功效：

子组件：child.jsx

export default { data() { return { info: { title: "标题一" }, info2: { title: "标题二" } }; }, render() { return ( <div> {this.$scopedSlots.default({ info: this.info })} {this.$scopedSlots.other({ info: this.info2 })} </div> ); } };

父组件：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> ); } }} />

功效：

vue插槽（slot）的模板与JSX写法