Vue 自定义组件创建与调用全流程解析

Vue 组件通信机制概述

在 Vue 开发中，掌握组件化思维至关重要。父组件向子组件传递数据主要依靠 props，而子组件向父组件反馈状态或触发逻辑则依赖 $emit。可以将组件比作汽车的车轮：props 决定了车轮的外观风格（如花纹、图案），使其符合整车设计；而 $emit 则确保车轮能与车身完美配合，实现动态交互与功能闭环。

核心机制包括两点：一是通过 props 实现父子组件间的数据单向传递；二是通过 this.$emit() 方法触发父组件中定义的事件回调，从而实现子组件对父组件行为的调用。

组件创建与代码结构

第一步，在项目的 components 目录下创建对应的组件文件。

第二步，编写组件的具体代码逻辑与模板结构。

以 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>

JavaScript 逻辑部分，处理组件交互与状态更新。

最终在浏览器中查看组件渲染效果及交互反馈。

实战案例：封装 Loading 组件

接下来，结合具体案例深入解析组件化的实际应用场景。

许多开发者关心如何编写 Vue 组件并将其集成到项目中。这就像煮米饭一样，需要遵循特定的步骤与规范。

首先，需要准备“米”，即创建组件源文件。假设我们要封装一个 Loading 效果组件，新建 loading.vue。其代码编写需遵循 Vue template 规范，此处仅展示最简示例，省略复杂逻辑。

组件导出配置 (index.js)

有了源文件（米），接下来需要配置“锅”，即创建统一的导出文件。通常每个组件对应一个独立文件夹，并包含一个 index.js 作为统一入口。虽然文件名可自定义，但约定俗成使用 index.js 以方便后续调用时的路径管理。

在 index.js 中，主要包含三个关键部分：红色区域标识引入刚才创建的 loading.vue 源文件；黄色区域是核心配置，通过 ES6 模块导出机制暴露组件，其中的命名（如 Loading）即为在其他文件中引用该组件时的标签名，例如使用 <Loading></Loading>；白色区域则是将该组件导出至 main.js 以便全局注册或局部引用。

组件注册与全局应用

3.原材料大米也有了 饭锅也有了 现在是万事俱备只欠东风 那我们第三部就是一个字”煮“ 两字：”开火“ 这里就是我们要把我们这个自己创建的组件应用到我们的页面之中 详情请看下图

在 main.js 主入口文件中，引入刚才定义的组件模块，并将其注册为全局或局部组件，完成组件的挂载与初始化。

完成上述步骤后，即可在任何需要的页面中插入 <Loading></Loading> 标签。组件对应的样式与 JS 逻辑已封装在第一步创建的源文件中，从而实现组件的复用与高效应用。

注：本实例基于 vue init webpack-simple xxx 基础模板构建。作为示例文章，内容可能存在未尽之处，敬请谅解。

总结

至此，关于 Vue 自定义组件的写法与用法详解已完成。更多相关 Vue 组件内容，请搜索本站历史文章或继续浏览后续教程。感谢支持！