vue之自定义组件的写法与用法

Posted 2022-11-26 jessie-xian

三个技能，父组件 —> 子组件传值（props）、子组件 —> 父组件传值（$emit）、以及插槽（slot）；对于一个独立的组件来说，props是用来为组件内部注入核心的内容；$emit用来使这个独立的组件通过一些逻辑来融入其他组件中。举个具体点的例子，假如你要做一辆车，车轮是要封装的一个独立组件，props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹，图案等；而$emit的作用则是让这些轮子能够和整辆车完美契合的运作起来。

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

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

二.组件代码(写法)

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() 
     
    

三.用法

引入组件


页面使用
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:


效果