The basic use

</ MyButton class="[btnStyle]"> <slot> button </slot> export default {name: 'MyButton', props: ['btnStyle']} <MyButton btnStyle=" style name "> </MyButton>Copy the code

A named slot

//MyButton component <button class="[btnStyle]"> <slot name="icon"></slot> </button> export default {name: 'MyButton', props: ['btnStyle']} <MyButton btnStyle=" style name "> <template v-slot:icon> <i class="icon-class"></i> </template> </MyButton>Copy the code

Scope slot

//MyButton component <button class="[btnStyle]"> <slot name="icon" :btnInfo="btnInfo"></slot> </button> export default {name: 'MyButton', props: ['btnStyle'], data () { return { btnInfo: { url: 'www.baidu.com'}}}} // use <MyButton btnStyle=" style name "> // insertable text components etc... <template v-slot:icon="btnInfo"> < I class="icon-class"></ I > {{btninfo. url}} //btnInfo can get the value of MyButton </template> </MyButton>Copy the code