温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2022-03-14 13:33:11 来源:亿速云 阅读:728 作者:小新 栏目:开发技术

小编给大家分享一下vue怎么使用脚手架vue-cli创建并引入自定义组件,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

一、创建并引入一个组件

1、创建组件

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

<template>
    <div>
        <h2>{{msg}}</h2>
    </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>

效果:

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

二、引入嵌套组件

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

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

<template>
    <div>
        <h2>{{secondMsg}}</h2>
    </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>
        <h2>{{msg}}</h2>
        <!--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怎么使用脚手架vue-cli创建并引入自定义组件”有了一定的了解,如果想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI