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和Date对象方法
May 22 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
Jun 05 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 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
解决中英文字符串长度问题函数
2007/01/16 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
PHP内置加密函数详解
2016/11/20 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
JS 建立对象的方法
2007/04/21 Javascript
编写Js代码要注意的几条规则
2010/09/10 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
Angularjs cookie 操作实例详解
2017/09/27 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
JavaScript对象拷贝与赋值操作实例分析
2018/12/10 Javascript
JS字符串常用操作方法实例小结
2019/06/24 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
Python中os和shutil模块实用方法集锦
2014/05/13 Python
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python对接支付宝支付自实现功能
2019/10/10 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
python温度转换华氏温度实现代码
2020/12/06 Python
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
Surfdome西班牙:世界上最受欢迎的生活方式品牌
2019/02/13 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
周年庆促销方案
2014/03/15 职场文书
师恩难忘教学反思
2014/04/27 职场文书
中文专业自荐书
2014/06/29 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技