## 一、组件插槽使用 组件Button.vue模板 ``` <template> <button type="button"><slot name="content"></slot></button> </template> ``` 引入使用 ``` <template> <Button><span slot="content">确认<span></Button> </template> <script> import Button from '@/components/Button.vue' export default { components: { Button } } </script> ``` ## 二、组件自定义事件 组件Button.vue模板 ``` <template> <button type="button" @click="handle"><slot name="content"></slot></button> </template> <script> export default { methods: { handle() { let listeners = this.$listeners; if(listeners.btnclick) { this.$emit('btnclick') // hello world } } } } </script> ``` 引用使用 ``` <template> <Button @btnclick="word"><span slot="content">确认<span></Button> </template> <script> import Button from '@/components/Button.vue' export default { components: { Button }, methods: { word() { console.log('hello world'); } } } </script> ``` ## 三、组件自定义属性 自定义的属性要通过props接入，可以限制类型及使用默认值 ``` <Button title="返回支付" /> ``` ``` <template> <button type="button"> {{ title }} </button> </template> <script> export default { name: 'Button', props: { title: { type: String, default: '' } } } </script> ```