标签：div col 语法 版本 nbsp return rip src default
vue官网API:
插槽：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> ); } }} />
结果：
标签：div col 语法 版本 nbsp return rip src default
原文地址：https://www.cnblogs.com/ccyinghua/p/12174699.html
