vue使用脚手架vue-cli创建并引入自定义组件

更新时间：2022年03月14日 11:20:19 作者：.NET开发菜鸟

这篇文章介绍了vue使用脚手架vue-cli创建并引入自定义组件的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

一、创建并引入一个组件

1、创建组件

vue-cli中的所有组件都是存放在components文件夹下面的，所以在components文件夹下面创建一个名为First.vue的自定义组件：

<template>
    <div>
        <h1>{{msg}}</h1>
    </div>
</template>
<script>

// 1、export 表示导出,在自定义组件里面使用export default导出  
export default {
    // name 表示设置别名，可以不设置，建议和组件的名称一致
    name:"First",
    data(){
        return{
            msg:"First Vue"
        }
    }
}
</script>

2、在App.vue组件里面引用First.vue组件

1、在<script>标签里面使用import导入自定义的标签：

// 1、导入自定义组件 First即First.vue组件里面设置的name值
import First from "./components/First"

2、在export里面添加自定义组件：

// 2、添加自定义组件
  components:{
    First
  }

3、在<template>标签里面引入自定义组件：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- <router-view/> -->
    <!--3、引用自定义组件-->
    <First></First>
  </div>
</template>

完整代码如下：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- <router-view/> -->
    <!--3、引用自定义组件-->
    <First></First>
  </div>
</template>

<script>
// 1、导入自定义组件 First即First.vue组件里面设置的name值
import First from "./components/First"
export default {
  name: 'App',
  // 2、添加自定义组件
  components:{
    First
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

效果：

二、引入嵌套组件

在上面的示例中，只是在App.vue中引入了单一的组件，如何引入嵌套组件呢？即First.vue组件里面又引用了自定义组件，这时该如何在App.vue组件里面引入呢？

1、先定义Second.vue自定义组件：

<template>
    <div>
        <h1>{{secondMsg}}</h1>
    </div>
</template>

<script>
export default {
    // name 表示设置别名，可以不设置，建议和组件的名称一致
    name :"Second",
    data(){
       return{
           secondMsg:"Second vue"
       }
    }
}
</script>

2、在First.vue组件中引用Second.vue组件

在First.vue中引用Second.vue组件和在App.vue中引入First.vue组件是一样的，完整代码如下：

<template>
    <div>
        <h1>{{msg}}</h1>
        <!--3、引用second.vue组件-->
        <Second></Second>
    </div>
</template>
<script>
// 1、使用import导入Second.vue
import Second from './Second';
// export 表示导出
export default {
    // name 表示设置别名，可以不设置，建议和组件的名称一致
    name:"First",
    data(){
        return{
            msg:"First Vue"
        }
    },
    // 2、添加自定义组件组件
    components:{
        Second
    }
}
</script>

3、在App.vue中引入嵌套组件

First.vue中引入了Second.vue组件以后，可以把First.vue组件看成是一个组件了，所以在App.vue中引入的时候代码是一样的：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- <router-view/> -->
    <!--3、引用自定义组件-->
    <First></First>
  </div>
</template>

<script>
// 1、导入自定义组件 First即First.vue组件里面设置的name值
import First from "./components/First"
export default {
  name: 'App',
  // 2、添加自定义组件
  components:{
    First
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4、效果

到此这篇关于vue使用脚手架vue-cli创建并引入自定义组件的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue+better-scroll 实现通讯录字母索引的示例代码
通讯录字母索引是常用的一种功能，本文主要介绍了Vue+better-scroll 实现通讯录字母索引，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
关于antd中select搜索框改变搜索值的问题
这篇文章主要介绍了关于antd中select搜索框改变搜索值的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue5中的事件修饰符(style)和template
这篇文章主要介绍了vue5中的事件修饰符(style)和template，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vue 监听是否切屏和开启小窗的实现过程
这篇文章主要介绍了vue 监听是否切屏和开启小窗的过程，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
vue使用mpegts.js的详细步骤记录
MPEGTS.js是一个轻量级的JavaScript库,用于处理MPEG-TS流,这篇文章主要给大家介绍了关于vue使用mpegts.js的详细步骤记录,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-04-04
基于Vue2.0+ElementUI实现表格翻页功能
Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，它面向企业级的后台应用，能够帮助你快速地搭建网站，极大地减少研发的人力与时间成本。这篇文章主要介绍了Vue2.0+ElementUI实现表格翻页功能,需要的朋友可以参考下
2017-10-10
vue实现日历表格（element-ui）
这篇文章主要为大家详细介绍了vue实现日历表格（element-ui），文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
vue.js实例对象+组件树的详细介绍
这篇文章主要介绍了vue.js实例对象+组件树的相关资料,需要的朋友可以参考下
2017-10-10
el-form表单验证的一些实用方法总结
表单校验是注册环节中必不可少的操作,表单校验通过一定的规则来确保用户提交数据的有效性,下面这篇文章主要给大家介绍了关于el-form表单验证的一些实用方法,需要的朋友可以参考下
2023-01-01
vue如何获取点击事件源的方法
本篇文章主要介绍了vue如何获取点击事件源的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08