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活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
随机推荐
- 异常处理的第二种方式-Throwable类中3个异常处理的方式
异常处理的第二种方式 如果异常出现的话,会立刻终止程序,所以我们得处理异常: 1.该方法不处理,而是声明抛出,由该方法的调用者来处理(throws). 2.在方法中使用try-catch的语句块来处理 ...
- 定时调度插件------FluentScheduler
定时调度插件------FluentScheduler 源码地址 官网文档地址 使用说明 dll引用 文章使用的版本为5.5.1版本 使用GuGet搜索FluentScheduler即可找到 如果框架 ...
- 插入排序(CSP-J 2021 T2)我有新思路了,链接:https://www.cnblogs.com/wjk53233/p/16533752.html
我有新思路了,链接:https://www.cnblogs.com/wjk53233/p/16533752.html 我有新思路了,链接:https://www.cnblogs.com/wjk5323 ...
- 工控领域上云实践-Zstack和软赢
工业以太网常见五大协议对比 大规模电机控制的方案选择-电机和驱动器篇 大规模电机控制的方案选择-控制器篇 工控领域有各种各样的总线来通讯以控制设备,很小众的接口规范慢慢的更小众了,最常见的接口规范就是 ...
- KMP字符串 AcWing 831
题目:https://www.acwing.com/problem/content/833/ 题意:求子串在母串中每次出现时的下标位置. 题解:哈哈哈,敲题时想到之前看到一个人叫 kmp 算法为 看毛 ...
- 代码随想录算法训练营day22 | leetcode 235. 二叉搜索树的最近公共祖先 ● 701.二叉搜索树中的插入操作 ● 450.删除二叉搜索树中的节点
LeetCode 235. 二叉搜索树的最近公共祖先 分析1.0 二叉搜索树根节点元素值大小介于子树之间,所以只要找到第一个介于他俩之间的节点就行 class Solution { public T ...
- js(最新)手机号码 正则验证 - 代码篇
现在手机号码,除了以11+.12+开头的没有,别的好像都有了! 代码如下: 方法一: function checkPhone(){ var phone = $(".phone"). ...
- CF837G - Functions On The Segments
我们考虑 \(\sum_{i=l}^r{f_i(x)}\) 是个什么东西.首先这个奇怪的东西很好离线做,所以尽管题目要求强制在线,我们还是离线下来试试. 我们发现,我们可以 \(x\) 坐标从 \(1 ...
- 拥抱下一代前端工具链-Vue老项目迁移Vite探索
作者:京东物流 邓道远 背景描述 随着项目的不断维护,代码越来越多,项目越来越大.调试代码的过程就变得极其痛苦,等待项目启动的时间也越来越长,尤其是需要处理紧急问题的时候,切换项目启动,等待的时间就会 ...
- 仿 MVC 三大特性
1.先做个小例子 特性,只能通过反射实现 我们自定义一个特性 public class CustomAttribute : Attribute { public int Id; public stri ...