根本用法
App.vue
<script>import Content from "./components/Content.vue";export default { data() { return { message: '', }; }, methods:{ getChildMsg:function (value){ console.log(value); this.message=value } }, components:{ Content }}</script><template><div> <Content><button>btn</button></Content> <Content><input type="text"></Content></div></template>- Content.vue
<template> <div> <h2>I am content</h2> <div> <slot></slot> </div> </div></template>具名插槽
App.vue
<script>import Content from "./components/Content.vue";export default { data() { return { message: '', }; }, methods:{ getChildMsg:function (value){ console.log(value); this.message=value } }, components:{ Content }}</script><template><div> <Content><button>btn</button></Content> <Content><input type="text"><button>btn2</button></Content> <Content> <template v-slot:button><button>btn4</button></template> <template v-slot:input><input type="text"></template> <template v-slot:h2><h2>插槽</h2></template> </Content></div></template>- Content.vue
<template> <div> <h2>I am content</h2> <div> <slot name="button"></slot> <slot name="input"></slot> <slot name="h2"></slot> </div> </div></template>作用域
备用内容
- App.vue
- Content.vue
<template> <div> <h2>I am content</h2> <div> <!-- 会在没有值的插槽中显示--> <slot name="button"><button>备用内容</button></slot> <slot name="input"></slot> <slot name="h2"></slot> </div> </div></template>渲染作用域
- test
- App.vue
<script> import Content from "./components/Content.vue"; export default { data() { return { message: 'hellokugou', }; }, methods:{ getChildMsg:function (value){ console.log(value); this.message=value } }, components:{ Content } }</script><template> <div> <Content><button>btn</button></Content> <Content><input type="text"><button>btn2</button></Content> <Content> <template v-slot:button> </template> <template v-slot:input><input type="text"></template> <template v-slot:h2><h2>插槽</h2></template> </Content> <!-- 无序--> <Content> <template v-slot:default="slotProps"> <ul> <li v-for="item in slotProps.list" :key="item">{{item}}</li> </ul> </template> </Content> <!-- 有序--> <Content> <template v-slot:default="slotProps"> <ol> <li v-for="item in slotProps.list" :key="item">{{item}}</li> </ol> </template> </Content> </div></template>- Content.vue
<template> <div> <h2>I am content</h2> <div> <!-- 会在没有值的插槽中显示--><!-- <slot name="button"><button>备用内容</button></slot>--><!-- <slot name="input"></slot>--><!-- <slot name="h2"></slot>--> <slot :list="list" :message="message"></slot> </div> </div></template><script>export default { data(){ return{ message: '你好宝贝', list: [1,2,3,4,5,6] } }}</script>