vue封装组件
父组件
<template>
<view>
<assembly @submitToParent="submitToParent">
<template v-slot:content>
<p>插槽内容</p>
</template>
</assembly>
</view>
</template>
<script>
import assembly from "./component/assembly";
export default {
data() {
return {
};
},
methods: {
submitToParent(data){}
},
components:{
assembly
}
};
</script>
<style lang="less" >
</style>
子组件
<template>
<view>
<view>头部</view>
<!-- 定义插槽 -->
<slot name="content"></slot>
<view>底部</view>
</view>
</template>
<script>
export default {
props:{
A: Number, // 基础类型检测 (`null` 意思是任何类型都可以)
B: [String, Number,Array, Object,Boolean], // 多种类型
C: { // 必传且是字符串
type: String,
required: true
},
D: { // 数字,有默认值
type: Number,
default: 100
},
E: { // 数组/对象的默认值应当由一个工厂函数返回
type: Object,
default: function () {
return { message: 'hello' }
}
},
F: { // 自定义验证函数
validator: function (value) {
return value > 10
}
}
},
data() {
return {
};
},
methods: {
handleSubmit(data){
this.$emit('submitToParent', data)
}
},
};
</script>
<style >
</style>
vue封装组件的更多相关文章
- vue封装组件的正确方式-封装类似elementui的组件
最近读了下element的源码,仿照他封装了两种不同的组件. 第一种:通过组件来调用显示的 <template> <!--src/component/custom/main.vue- ...
- vue 封装组件
props 接收数据 props对象里面 键值 是对改数据的 数据类型 的规定.做了规范,使用者就只能传输指定类型的数据,否则报警告 先根据要求写出完整的代码,再一一用参数实现组件封装 这里试着封装一 ...
- vue 封装组件上传img
var _uploadTemplate = '<div>'+ '<input type="file" name="file" v-on:cha ...
- Vue 爬坑之路(九)—— 用正确的姿势封装组件
迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...
- seventBus(封装) 一个巧妙的解决vue同级组件通讯的思路
如果在你项目中需要多处用到同级组件通讯,而又不想去写繁琐的vuex,可以参考这个小思路.本人在写项目中琢磨出来的,感觉挺好用,分享一下. 1.在utils文件夹下添加BusEvent.js 注释已经很 ...
- vue封装一些常用组件loading、switch、progress
vue封装一些常用组件loading.switch.progress github文档https://github.com/zengjielin/vue-component-library loadi ...
- vue --》组件的封装 及 参数的传递
vue组件的定义 ● 组件(Component)是Vue.js最强大的功能之一 ● 组件可以扩展HTML元素,封装可重用代码 ● 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能 ...
- vue cli3.0 封装组件全局引入js文件并发布到npm
首先用 vue create创建一个项目 当前的项目目录是这样的: 首先需要创建一个 packages 目录,用来存放组件 然后将 src 目录改为 examples 用作示例 二.修改配置 启动项目 ...
- echars vue 封装全局组件 曲线 柱状图 同v-chars绿色系 配置样式
Echars vue封装 ,曲线图 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- JavaScript 检查(Linting)工具的比较
一个好的检查(linting)工具可以确保一个项目遵循编码规范. 让我们来看看四种流行替代方案的特性和优缺点:JSLint , JSHint , JSCS 和 ESLint . JSLint JSLi ...
- Odoo View 常用技巧
隐藏Field <field name="currency_id" invisible="True"/> <field name=" ...
- SqlServer服务中利用触发器对指定账户进行登录ip限制提升安全性
转眼间上次写文章已经是 2022年12月15日的事情啦,本来从2022年7月份开始写作之后保持着每周一篇,然而从12月15日后断更了这么久,经历了,隔离.阳.过年.从今天开始继续坚持写作,本片文章给大 ...
- Quartz.Net源码Example之Quartz.Examples
Quartz.Examples 反射-Example批量执行 实现思路:定义一个统一的接口,需要实现的类全部实现该接口:通过反射获取实现该接口的实例并触发其中的方法. 定义统一的接口 // 所有要 ...
- 【Redis场景拓展】秒杀问题-全局唯一ID生成策略
全局唯一ID 为什么要使用全局唯一ID: 当用户抢购时,就会生成订单并保存到订单表中,而订单表如果使用数据库自增ID就存在一些问题: 受单表数据量的限制 id的规律性太明显 场景分析一:如果我们的id ...
- python实现通用excel导入到mysql
{ "file": "OrderDetail-2020-06-03.xls", "startRow": 1, "table&quo ...
- 【学习日志】Java8的CompletableFuture
Java 8引入的CompletableFuture,对Future做了改进: 1.可以传入回调对象,不再像Future那样循环查询执行结果. 2.另外可以将多个Future结合到一起并行或串行执行, ...
- imax6开发版_挂载NFS文件系统
挂载:mount -o vers=4 192.168.30.108:/home/penuel/linux_imax6/workdir /home/root/workdir 取消挂载:umount /h ...
- 「SHOI2015」脑洞治疗仪
\(\text{Naive Solition}\) 当然是 \(ODT\) 暴力啦 \(Luogu\) 煞费苦心加强了数据,于是就过不了了... 不过 \(LibreOJ\) 上可以过 #includ ...
- 依那西普治疗多关节型和系统型JRA的长期疗效[EULAR2007_SAT0397]
依那西普治疗多关节型和系统型JRA的长期疗效 Giannini EH, Ilowite NT. EULAR2007. Abstract No:SAT0397. 标签: EULAR2007,EULAR文 ...