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 相关文章推荐
js各种验证文本框输入格式(正则表达式)
Oct 22 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
20个非常棒的 jQuery 幻灯片插件和教程分享
Aug 23 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
js函数调用的方式
May 06 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 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函数
2010/02/16 PHP
php上传图片存入数据库示例分享
2014/03/11 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
php实现购物车产品删除功能(2)
2020/07/23 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
js常见表单应用技巧
2008/01/09 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
AngularJS 前台分页实现的示例代码
2018/06/07 Javascript
Pyramid将models.py文件的内容分布到多个文件的方法
2013/11/27 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python实现KNN(K-近邻)算法的示例代码
2019/03/05 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
为什么称python为胶水语言
2020/06/16 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
挪威太阳镜和眼镜网上商城:SmartBuyGlasses挪威
2016/08/20 全球购物
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
音乐系毕业生自荐信
2013/10/27 职场文书
团队精神的演讲稿
2014/05/14 职场文书
外联部演讲稿
2014/05/24 职场文书
建筑安全标语
2014/06/07 职场文书
咖啡店创业计划书
2014/08/15 职场文书
检讨书格式
2019/04/25 职场文书
Python基础之条件语句详解
2021/06/16 Python