## 一、組件插槽使用 組件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> ```