vue slot跨组件,vue from 组件
本文主要介绍vue如何用vueslot封装公共组件，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
使用vue插槽封装公共组件使用插槽插槽封装。
使用vue slot封装公共组件
公共子组件：公共插槽
差异
div class=top
h1 class= title“{ title } }/h1
Slot name=headerRight 您可以根据Slot name属性选择插槽位置/插槽。
/div
这里的Slot相当于留了一个地方来接收父组件传入的内容/slot。
/div
导出默认值{
道具：{
标题：{
类型：字符串
}
},
}
父组件：
！-模式审计-
publicSlot :title=title
div class=main_box
//这里可以写父组件自定义页面的内容。
El-form:model= form datas label-width= 120 px
el-row
el-col :span=11
El-form-item label=选择区域：
El-select v-model= form datas . region
El-option标签=一区值=上海/el-option
El-option标签=区域2 值=北京/el-option
/el-select
/El-表单-项目
/el-col
el-col :span=24
El-form-item label=输入框：
el输入
type=textarea
v-model=textarea
/el-input
/El-表单-项目
/el-col
/el-row
/el格式
/div
//这里插入了一个按钮。
div slot=headerRight
El按钮类型=text 操作按钮/el按钮
/div
/publicSlot
从导入公共插槽./public/components/public slot . vue
导出默认值{
公共插槽
}
vue插槽：
vue 插槽：
Vue实现了一套内容分发的API，其灵感来源于Web组件的规范草案，使用元素作为出口来承载分发的内容。
命名插槽作用域插槽动态插槽
使用slot插槽封装
1.包装收割台组件。
模板
div class=head_container
slot name=left/slot
差异
span{{ title }}/span
/div
插槽名称=右/slot
/div
/模板
导出默认值{
名称：“homeTop”，
//定义道具的标题属性
道具：{
标题：字符串，
},
}
2.在main.js中全局导出组件
从导入HeadTop。/views/HeadTop.vue
vue . component(“HeadTop”，head top)
3.当你想使用组件时，如果你只想要中间的标题，那么就不要使用solt槽。
Head title=我的/HeadTop
4.如果你需要在左右两边都加东西，那就用槽。因为之前已经定义了插槽的名称，所以在调用时需要指定插槽的名称，以确定添加位置。
HeadTop :title=address.name
div class=icon slot=left
i class=el-icon-search/i
/div
div class= log in slot= right @ click= goToLogin
登录/span/
注册/span
/div
/头顶
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。