组件如何引用其他组件和插件

如何在组件中引入其它组件

组件的使用三步

1：导入组件

• import 自定义的一个组件名 from "组件路径";
• 注意点，这里组件路径就算是当前同一目录也最好加上"./组件名"，不然会报错

2：注册组件

• 组件的使用是需要注册的，注册方式为：

  export default {
    components: {
      组件名,     //注册的组件都写在components对象下。
    }
  }
  

3：使用组件(写到相应html位置即可)

    <组件名></组件名>   //该组件名来自于在组件注册时的组件名

<template>
  <div class="main">
    <!-- 使用组件  -->
    <!-- 在这index.vue是父组件，top，middle，bottom是子组件 -->
    <!-- top与middle是兄弟组件 -->
    <top></top>
    <middle></middle>
    <bottom></bottom>
  </div>
</template>
<script>
// 导入组件  这里面top,middle,bottom是需要另外创建的vue组件，这里是没创建的
import top from "./top.vue";
import middle from "./middle.vue";
import bottom from "./bottom.vue";

export default {
  // 组件注册
  components: {
    top, //相当于top:top
    middle,
    bottom
  }
};
</script>
<style>
.main {
  width: 100%;
}
.main img {
  width: 100%;
}
</style>

组件中如何使用外部插件

以axios为例

使用外部插件分为三步

1. 装包（安装外部插件）

   npm i axios //到相应目录下执行该命令    
   

2. 导包（在单文件组件中导入外部插件）

   import axios from "axios"
   

3. 用包（在相应代码位置使用）

   使用和以前一样，该怎么用还是怎么用

   axios({
   url:"xxx"
   }).then(res=>{
   })
   

   DEMO

   <template>
     <div>
       <input type="text" v-model="searchValue" />
       <button @click="getMusic">点我</button>
       <ul>
         <li v-for="(item, index) in songs" :key="index">{{item.name}}</li>
       </ul>
     </div>
   </template>
   <script>
   // 使用axios   1:安装axios，npm i axios   2:导包  import axios from "axios"  3:使用
   // 导包
   import axios from "axios";
   export default {
     data() {
       return {
         searchValue: "", //input框的值
         songs: []
       };
     },
     methods: {
       getMusic() {
         // 使用，以前怎么用，现在还怎么用
         axios({
           url: "https://autumnfish.cn/search?keywords=" + this.searchValue,
           method: "get"
         }).then(res => {
           this.songs = res.data.result.songs;
           window.console.log(this.songs);
         });
       }
     }
   };
   </script>
   <style>
   </style>