vue 插槽slot
(1) 父组件代码 <chlid><h1>guojing</h1></child> 子组件 child.vue <template> <div> <p>afjladjfl</p> <slot></slot> </div> </template> (2)具名插槽 父组件代码(1) <child> <template slot="header"> <h1>Here might be a page title</h1> </template> <p>A paragraph for the main content.</p> <p>And another one.</p> <template slot="footer"> <p>Here's some contact info</p> </template> </child> 或者:父组件代码(2) <child> <h1 slot="header">Here might be a page title</h1> <p>A paragraph for the main content.</p> <p>And another one.</p> <p slot="footer">Here's some contact info</p> </child> 子组件child.vue <template> <div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> </template> (3)作用域插槽 父组件代码 <child> <template scope='xxx'> <span>from parent</span> <span>{{xxx.say}}</span> </template> </child>
子组件 <template> <div> <slot :say="from child"></slot> </div> </template> 或者: 父组件代码 <child :childlist="items"> <template slot="name001" scope='xxx'> <li>{{xxx.thing}}</li> </template> </child> 子组件 <template> <ul> <slot name=:"name001" v-for="item in childlist" :thing="item.what"></slot> </ul> </template>
工欲善其事 必先利其器