父组件

<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封装组件的更多相关文章

  1. vue封装组件的正确方式-封装类似elementui的组件

    最近读了下element的源码,仿照他封装了两种不同的组件. 第一种:通过组件来调用显示的 <template> <!--src/component/custom/main.vue- ...

  2. vue 封装组件

    props 接收数据 props对象里面 键值 是对改数据的 数据类型 的规定.做了规范,使用者就只能传输指定类型的数据,否则报警告 先根据要求写出完整的代码,再一一用参数实现组件封装 这里试着封装一 ...

  3. vue 封装组件上传img

    var _uploadTemplate = '<div>'+ '<input type="file" name="file" v-on:cha ...

  4. Vue 爬坑之路(九)—— 用正确的姿势封装组件

    迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...

  5. seventBus(封装) 一个巧妙的解决vue同级组件通讯的思路

    如果在你项目中需要多处用到同级组件通讯,而又不想去写繁琐的vuex,可以参考这个小思路.本人在写项目中琢磨出来的,感觉挺好用,分享一下. 1.在utils文件夹下添加BusEvent.js 注释已经很 ...

  6. vue封装一些常用组件loading、switch、progress

    vue封装一些常用组件loading.switch.progress github文档https://github.com/zengjielin/vue-component-library loadi ...

  7. vue --》组件的封装 及 参数的传递

    vue组件的定义 ● 组件(Component)是Vue.js最强大的功能之一 ● 组件可以扩展HTML元素,封装可重用代码 ● 在较高层面上,组件是自定义元素,Vue.js的编译器为他添加特殊功能 ...

  8. vue cli3.0 封装组件全局引入js文件并发布到npm

    首先用 vue create创建一个项目 当前的项目目录是这样的: 首先需要创建一个 packages 目录,用来存放组件 然后将 src 目录改为 examples 用作示例 二.修改配置 启动项目 ...

  9. echars vue 封装全局组件 曲线 柱状图 同v-chars绿色系 配置样式

    Echars vue封装 ,曲线图 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  10. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

随机推荐

  1. JavaScript 检查(Linting)工具的比较

    一个好的检查(linting)工具可以确保一个项目遵循编码规范. 让我们来看看四种流行替代方案的特性和优缺点:JSLint , JSHint , JSCS 和 ESLint . JSLint JSLi ...

  2. Odoo View 常用技巧

    隐藏Field <field name="currency_id" invisible="True"/> <field name=" ...

  3. SqlServer服务中利用触发器对指定账户进行登录ip限制提升安全性

    转眼间上次写文章已经是 2022年12月15日的事情啦,本来从2022年7月份开始写作之后保持着每周一篇,然而从12月15日后断更了这么久,经历了,隔离.阳.过年.从今天开始继续坚持写作,本片文章给大 ...

  4. Quartz.Net源码Example之Quartz.Examples

    Quartz.Examples 反射-Example批量执行 ​ 实现思路:定义一个统一的接口,需要实现的类全部实现该接口:通过反射获取实现该接口的实例并触发其中的方法. 定义统一的接口 // 所有要 ...

  5. 【Redis场景拓展】秒杀问题-全局唯一ID生成策略

    全局唯一ID 为什么要使用全局唯一ID: 当用户抢购时,就会生成订单并保存到订单表中,而订单表如果使用数据库自增ID就存在一些问题: 受单表数据量的限制 id的规律性太明显 场景分析一:如果我们的id ...

  6. python实现通用excel导入到mysql

    { "file": "OrderDetail-2020-06-03.xls", "startRow": 1, "table&quo ...

  7. 【学习日志】Java8的CompletableFuture

    Java 8引入的CompletableFuture,对Future做了改进: 1.可以传入回调对象,不再像Future那样循环查询执行结果. 2.另外可以将多个Future结合到一起并行或串行执行, ...

  8. imax6开发版_挂载NFS文件系统

    挂载:mount -o vers=4 192.168.30.108:/home/penuel/linux_imax6/workdir /home/root/workdir 取消挂载:umount /h ...

  9. 「SHOI2015」脑洞治疗仪

    \(\text{Naive Solition}\) 当然是 \(ODT\) 暴力啦 \(Luogu\) 煞费苦心加强了数据,于是就过不了了... 不过 \(LibreOJ\) 上可以过 #includ ...

  10. 依那西普治疗多关节型和系统型JRA的长期疗效[EULAR2007_SAT0397]

    依那西普治疗多关节型和系统型JRA的长期疗效 Giannini EH, Ilowite NT. EULAR2007. Abstract No:SAT0397. 标签: EULAR2007,EULAR文 ...