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获取浏览器类型和版本的方法(js获取浏览器版本)
Mar 13 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
Apr 06 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
js实现右键弹出自定义菜单
Sep 08 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和Mysqlweb应用开发核心技术 第1部分 Php基础-1 开始了解php
2011/07/03 PHP
无法在发生错误时创建会话,请检查 PHP 或网站服务器日志,并正确配置 PHP 安装(win+linux)
2012/05/05 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
PHP编写daemon process详解及实例代码
2016/09/30 PHP
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
基于JavaScript自定义构造函数的详解说明
2013/04/24 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
js选项卡的实现方法
2015/02/09 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
bootstrap fileinput 插件使用项目总结(经验)
2017/02/22 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
chosen实现省市区三级联动
2018/08/16 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
深入理解python函数递归和生成器
2016/06/06 Python
深入解析Python中的上下文管理器
2016/06/28 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
python 爬虫出现403禁止访问错误详解
2017/03/11 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
Python3.5 + sklearn利用SVM自动识别字母验证码方法示例
2019/05/10 Python
Python字典的概念及常见应用实例详解
2019/10/30 Python
python中可以声明变量类型吗
2020/06/18 Python
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
英国最大的在线床超市:Bed Star
2019/01/24 全球购物
老总助理工作岗位职责
2014/02/06 职场文书
大型会议接待方案
2014/03/01 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
运动会口号大全
2014/06/07 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
学生个人评语大全
2015/01/04 职场文书