vue中slot在组件中的作用,
本文主要介绍了如何在vue3.0中封装button并使用slot组件，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
封装按钮使用槽组件要求子组件父组件引用vue带你封装按钮创建ShowButton.vue的组件新建Button.vueShowButton.vue供内部使用。
封装button使用slot组件
需求
同样的按钮用在不同的页面上，只是文字不同；有些内容是登录，有些是注册。
姑且称自己为按钮组件吧。
子组件
模板
！-:type=“type”是按钮类型；disabled=disabled 是确定它是假还是真。
{is-disabled:disabled}如果为true，则可以具有is-disabled的样式。
@click=$emit(click )传入cklick单击事件
-
按钮
y形按钮
:class= { is-disabled :disabled }
:type=type
:disabled=“disabled”
@click=$emit(click )
狭槽
！-这是父组件中的一个插槽，您可以在其中放置登录或两个注册的文本字段-
/插槽
/按钮
/模板
脚本
导出默认值{
名称： y按钮，
Props:{//将值传递给父组件
类型：字符串，
Disable:{//传递值类型，默认值为false。
类型：布尔型，
默认值：false
}
}
}
/脚本
样式范围
/*获得焦点并悬停时更改颜色*/。is-disabled:专注。is-禁用：悬停{
背景：蓝色；
颜色：白色；
}
/风格
父组件引用
模板
差异
输入类型=text v-model=use.email
div class=btn_wrap
button:disabled= is disabled @ click= log in click 登录/Ybutton
/div
/div
/模板
脚本
//介绍按钮组件
从“”导入Ybutton。/y按钮
导出默认值{
data(){
返回{
用户：{
电子邮件：“”
}
}
},
组件：{//注册组件
y按钮
},
computed:{//listening子组件的disabled用于启用或禁用按钮。
isDisabled(){
如果(this.user.email){
//如果输入框有值，把disabled设为false也无济于事。
返回false
}否则{
返回true
}
}
},
方法：{
loginClick(){
//实现登录并存储令牌
这个。$axios.post(/api/users/login ，this.user)。然后(res={
//res结果会返回token，我们可以用解构模式给他存储。
const { token }=res.data
//存储ls
localStorage.setItem(wxToken ，token)；
//保存后，页面会跳转到首页。
这个。$router.push(/)
})
}
}
}
/脚本
vue带你封装一个button
作为一个后端程序员，偶尔搞搞前端，是为了我开拓新的领域，提高自己的竞争力。说实话，搞前端和搞后端的思维方式完全不一样，侧重点也大不相同。今天是我农历生日，哈哈哈哈，开心就写几篇放纵一下吧。
使用Vue-cli创建一个HelloWorld项目作为起始脚手架。
创建一个 ShowButton.vue 的组件
模板
差异
H1封装一个按钮/h1。
div v-if=value===1
按钮@click=buttonClick()按钮1/按钮
/div
div v-else-if=value===2
按钮@click=buttonClick()按钮2/按钮
/div
div-else
按钮@click=buttonClick()按钮3/按钮
/div
/div
/模板
脚本
导出默认值{
名称：显示按钮，
data() {
返回{
值：2
};
},
方法：{
buttonClick() {
console . log( value this . value)；
}
}
};
/脚本
风格
/风格
这里使用vue中的v-if表达式进行逻辑判断，但是如果有10个按钮，那么就需要写10个判断，如果组件会被其他页面引用，就要重新复制一次。代码一点也不优雅。
我们借助于VUE给我们提供的提出函数解决这个问题。
新建一个 Button.vue
脚本
导出默认值{
道具：{
类型：{
类型：字符串，
默认值："正常"
},
文本：{
类型：字符串，
默认："按钮"
}
},
渲染(h){
/**
* h是标签名的另一个名称，接受2个参数，具体可看某视频剪辑软件文档
* 1 - 元素
* 2 - 选项
*/
返回h(按钮,{
类别：{
btn:没错，
“BTN-成功”:这个。type===成功
“BTN-危险”:这个。type===危险，
“BTN-警告”:这个。type===警告，
“BTN-正常”:这个。type=== normal
},
domProps:{
innerText: this.text 默认
},
开：{
点击：this.handleClick单击点击
}
})
},
方法：{
handleClick(){
这个发出( myClick )
}
}
}
/脚本
样式范围。btn{
宽度：100像素
高度：40px
行高：40px
边框：0px
边框半径：5px
颜色：# ffff
}。按钮成功{
背景：# 2ecc71
}。BTN-危险{
背景：# e74c3c
}。BTN-警告
背景：# f39c12
}。BTN-正常{
背景：# bdc3c7
}
/风格
ShowButton.vue 内使用
模板
差异
氕封装一个按钮/h1
！- div v-if=value===1
按钮@click=buttonClick()按钮1/按钮
/div
div v-else-if=value===2
按钮@click=buttonClick()按钮2/按钮
/div
div-否则
按钮@click=buttonClick()按钮3/按钮
/div -
Button type= success text= Button 1 @ my click= Button click()/Button
/div
/模板
脚本
从导入按钮.按钮。vue ；
导出默认值{
名称：显示按钮，
data() {
返回{
值：2
};
},
组件：{
纽扣
},
方法：{
buttonClick() {
控制台。日志(值这个。值)；
}
}
};
/脚本
风格
/风格
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。