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 Array.remove() 数组删除
Aug 06 Javascript
Javascript select下拉框操作常用方法
Nov 09 Javascript
jQuery Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
基于dom编程中 动态创建与删除元素的使用
Apr 17 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
May 10 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 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
杏林同学录(四)
2006/10/09 PHP
PHP输入流php://input介绍
2012/09/18 PHP
开启PHP的伪静态模式
2015/12/31 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
使用PHP开发留言板功能
2019/11/19 PHP
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
探讨JavaScript中声明全局变量三种方式的异同
2013/12/03 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
js+canvas绘制矩形的方法
2016/01/28 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
jQuery获取浏览器类型和版本号的方法
2016/07/05 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
js微信分享API
2020/10/11 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
2015公务员试用期工作总结
2014/12/12 职场文书
任命通知范文
2015/04/21 职场文书
2015年中秋寄语
2015/07/31 职场文书
《植树问题》教学反思
2016/03/03 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python