vue 自定义组件的写法与用法详解


Posted in Javascript onMarch 04, 2020

三个技能,父组件 —> 子组件传值(props)、子组件 —> 父组件传值(emit用来使这个独立的组件通过一些逻辑来融入其他组件中。举个具体点的例子,假如你要做一辆车,车轮是要封装的一个独立组件,props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹,图案等;而$emit的作用则是让这些轮子能够和整辆车完美契合的运作起来。

(1)使用props可以实现父子组件之间的传值
(2)使用this.$emit()可是实现子组件调用父组件的方法

一.在commponents文件创建组件文件

vue 自定义组件的写法与用法详解

二.组件代码(写法)

index.vue

<template>
  <div class="cusdealed">
    <div class="submited" v-if="showStatus==1">
      <div class="submitRes">
        <img class="resImg" src="../../common/img/repectSubmit.png" alt="">
      </div>
      <div class="submitTip tipwidth">该单据已经提交过了,不用重复提交哦!</div>
    </div>

     <div class="submited" v-if="showStatus==2">
      <div class="submitRes">
        <img class="resImg" src="../../common/img/invalid.png" alt="">
      </div>
      <div class="submitTip">单据已失效,不能扫单入库!</div>
    </div>

    <div class="submited" v-if="showStatus==3">
      <div class="submitRes">
        <img class="resImg" src="../../common/img/invalid.png" alt="">
      </div>
      <div class="submitTip">找不到该单据,不能扫单入库!</div>
    </div>
    
  </div>
</template>
<script type="text/javascript" src="./logic.js"></script>
<style lang="less" scoped>
  @import './style.css';
</style>
style.less

//样式文件
@import '../../common/less/px2rem.less';
@import '../../common/less/base.less';

.cusdealed {
 .submited {
  .submitRes {
   .px2rem(150);
   width: @px2rem;
   height: @px2rem;
  }

  .submitRes {
   .px2rem(227);
   margin: @px2rem auto 0;

   .resImg {
    width: 100%;
    height: 100%;
    display: block;
   }
  }

  .submitTip {
  .px2rem(58);
  //  height: @px2rem;
   font-family: PingFangSC-Regular;
   font-weight: 400;
   color: rgba(51, 51, 51, 1);
   line-height: @px2rem;
  }
  .submitTip{
    .px2rem(32);
    font-size: @px2rem;
  }
  .tipwidth{
    .px2rem(384);
    width: @px2rem;
  }
  .submitTip{
    .px2rem(50);
    margin: @px2rem auto 0;
  }
 }
}
logic.js

//逻辑文件
import { Spinner } from 'vux'

export default {
  name: 'cusDealing',
  data() {
    return {
     showStatus:1
    }
  },
  components: {
    Spinner,
  },
  props: {
    // showStatus: Number
   },
   computed: {
  
   },
   watch: {
    showStatus(val) {
     console.log(val, 'showStatus---')
     return val;
    }
   },
  methods: {
    
  },
  mounted() {
   
  }
}

三.用法

引入组件

vue 自定义组件的写法与用法详解

 页面使用

html:

<!-- 处理完弹窗 -->
  <div class="dealed" :style="'padding-top:'+marginTop+'px;height:'+bodyheight+'px;'" v-if="dealStatus==2">
    <div class="dealedContent">
      <Cusdealed :showStatus="showStatus"></Cusdealed>
      <div class="Iknow" @click="Iknow">我知道了</div>
    </div>
  </div>

js:

vue 自定义组件的写法与用法详解

效果

vue 自定义组件的写法与用法详解

好了,看下正文。下面结合日常生活给大家讲下道理。

在网上经常看到有朋友在问自己能不能写vue组件 如果可以怎么应用到自己的项目之中呢!我觉得吧这个事儿就和用煮大米饭是一个道理的

1. 首先作大米饭我们得有米吧 要不 巧妇难为无米之炊啊 因此先买好我们自己的大米也就是创建组件文件,这里我假设要创建一个自己loading效果组件 那么我们就先创建 loading.vue 里面的代码根据vue template相关规则写就可以 这里就不在赘述了 我只写一个最最简单的例子

vue 自定义组件的写法与用法详解

2.ok了 米就这么愉快的买好了 那么有了米我们现在只需要把他放在锅里!那么这个锅是谁呢!好吧我们自己来背这个锅,我们创建一个相关的.js文件 通常组件都是一个功能自己一个文件夹那么每个组件都应该有自己独立的调用文件(一盆大米一个锅)那么为了统一我们可以都叫做index.js当然了这个名字你可以随便起 只有以后你在后续调用时候更换相关名字即可!重点来了 这个锅是怎么造的呢!话不多说直接上图

vue 自定义组件的写法与用法详解

那么上面三个这么违和的框是干什么的么:红色框框:我靠这还用问吗 你调用那个文件你得告诉人间啊 这里当然要调用刚才我们自己创建的loading.vue文件。 黄色框框:我靠这个黄色的框框可以说是本次本文章中重点中的重点 为什么这么说呢 我们要使用自己的组件就要导出这个组件 而这个黄色框框中的代码就是导出自己组件的相应配置 其中那个非常猥琐的浪线则是本例子的”命根子“ 这个命名就是你在其他文件中调用这个组件(这里是loading组件)的名字 在这个例子中我们在调用组件时候就可以写成<Loading></Loading>。白色框框:这个没什么好说的 相当于导出这个组件 在main中好接受!

3.原材料大米也有了 饭锅也有了 现在是万事俱备只欠东风 那我们第三部就是一个字”煮“ 两字:”开火“ 这里就是我们要把我们这个自己创建的组件应用到我们的页面之中 详情请看下图

vue 自定义组件的写法与用法详解

黄色框框部分就是在主文件main.js中 引入刚才定义的组件 和 应用 这个组件了!

最后的最后你可以在任何想用这个组件的地方插入<Loading></Loading>了 组件相应的样式和js代码可以直接写在第一步中的文件之中!就这样一个自己创建的组件就这么愉快的应用啦!

(备注:本实例家里在用vue init webpack-simple xxx的基础之上,第一次写文章很多不周全之处 还请各位客官谅解 )

总结

到此这篇关于vue 自定义组件的写法与用法详解 的文章就介绍到这了,更多相关vue 自定义组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript脚本性能的优化方法
Feb 02 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
Aug 14 Javascript
js事件(Event)知识整理
Oct 11 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
jQuery DOM操作实例
Mar 05 Javascript
基于Bootstrap+jQuery.validate实现Form表单验证
Dec 16 Javascript
jQuery简单实现遍历数组的方法
Apr 14 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
基于Bootstrap模态对话框只加载一次 remote 数据的解决方法
Jul 09 Javascript
JS call()及apply()方法使用实例汇总
Jul 11 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
Mar 04 #Javascript
vue请求数据的三种方式
Mar 04 #Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 #Javascript
JS中==、===你分清楚了吗
Mar 04 #Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 #Javascript
通过实例了解Javascript柯里化流程
Mar 03 #Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 #Javascript
You might like
用PHP实现的四则运算表达式计算实现代码
2011/08/02 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
php生成随机数的三种方法
2014/09/10 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
python单例模式实例分析
2015/04/08 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
python飞机大战pygame游戏背景设计详解
2019/12/17 Python
python 进程池pool使用详解
2020/10/15 Python
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
房地产开发项目建议书
2014/05/16 职场文书
公司委托书范本5篇
2014/09/20 职场文书
奖学金感谢信
2015/01/21 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python