vue使用腳手架vue-cli創(chuàng)建并引入自定義組件

更新時(shí)間：2022年03月14日 11:20:19 作者：.NET開發(fā)菜鳥

這篇文章介紹了vue使用腳手架vue-cli創(chuàng)建并引入自定義組件的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

一、創(chuàng)建并引入一個(gè)組件

1、創(chuàng)建組件

vue-cli中的所有組件都是存放在components文件夾下面的，所以在components文件夾下面創(chuàng)建一個(gè)名為First.vue的自定義組件：

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

// 1、export 表示導(dǎo)出,在自定義組件里面使用export default導(dǎo)出  
export default {
    // name 表示設(shè)置別名，可以不設(shè)置，建議和組件的名稱一致
    name:"First",
    data(){
        return{
            msg:"First Vue"
        }
    }
}
</script>

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

1、在<script>標(biāo)簽里面使用import導(dǎo)入自定義的標(biāo)簽：

// 1、導(dǎo)入自定義組件 First即First.vue組件里面設(shè)置的name值
import First from "./components/First"

2、在export里面添加自定義組件：

// 2、添加自定義組件
  components:{
    First
  }

3、在<template>標(biāo)簽里面引入自定義組件：

<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、導(dǎo)入自定義組件 First即First.vue組件里面設(shè)置的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組件里面又引用了自定義組件，這時(shí)該如何在App.vue組件里面引入呢？

1、先定義Second.vue自定義組件：

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

<script>
export default {
    // name 表示設(shè)置別名，可以不設(shè)置，建議和組件的名稱一致
    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導(dǎo)入Second.vue
import Second from './Second';
// export 表示導(dǎo)出
export default {
    // name 表示設(shè)置別名，可以不設(shè)置，建議和組件的名稱一致
    name:"First",
    data(){
        return{
            msg:"First Vue"
        }
    },
    // 2、添加自定義組件組件
    components:{
        Second
    }
}
</script>

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

First.vue中引入了Second.vue組件以后，可以把First.vue組件看成是一個(gè)組件了，所以在App.vue中引入的時(shí)候代碼是一樣的：

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

<script>
// 1、導(dǎo)入自定義組件 First即First.vue組件里面設(shè)置的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>