在vue3.0中封装button使用slot组件

目录

• 封装button使用slot组件
• 需求
• 子组件
• 父组件引用
• vue带你封装一个button
• 创建一个 ShowButton.vue 的组件 
• 新建一个 Button.vue 
• ShowButton.vue 内使用

封装button使用slot组件

需求

同一个button在不同页面使用,只有文字不一样;有的内容为登录有的为注册

下面我们自封一个button组件

子组件

父组件引用

vue带你封装一个button

作为一个后端程序员偶尔搞搞前端，对我自己来说是打开新的领域，提高自己的竞争力，说实话搞前端和搞后端的思维方式是完全不同的，注重点也是非常不同的，话说今天宝宝我农历生日哈哈哈哈，开心就写几篇放纵一下。

使用 Vue-cli 创建一个 HelloWorld 项目即可作为起始脚手架。

创建一个 ShowButton.vue 的组件 

这里用了vue 里的 v-if 表达式做逻辑判断，但是如果有 10 个按钮，那么就需要写 10 个 判断，而且如果该组件还将被别的页面引用到，那就得还得复制一遍。代码一点也不优雅呀。

我们借助于 VUE 给我们提供的 render 函数解决这个问题。

新建一个 Button.vue 

ShowButton.vue 内使用

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。