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

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

组件的使用三步

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为例

使用外部插件分为三步

装包（安装外部插件）

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

导包（在单文件组件中导入外部插件）
```
import axios from "axios"
```

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

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

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>