初始vue(组件的定义及传参，Axios数据请求及渲染，vue路由）

ss会介绍一下内容：

组件的定义及传参，Axios数据请求及渲染，vue路由

1.组件的定义

在编写页面过程中，轮播图可能是个重复使用的页面，这个时候就需要用到组件，把重复的页面封装成公共组件。复用性比较好

如何封装成公共组件

例如：在components目录下新建一个Banner.vue

在Banner.vue中定义轮播的相关页面以及对应的方法。

在页面中如何使用Banner.vue组件。

首先引入banner。在components中引入自定义组件

components: { Banner } 意思为引入组件，组件可以写在别的文件中，也可以写在本文件中，需要赋值给变量

<Banner/> 自定义标签调用轮播图

组件传参：

假设从子组件中如何获取父组件的值，此时需要传参。

父页面中：<Banner :imgArr="img"/>  

定义一个imgArr参数，传入img所对应的数据,img的数据在父页面中

在子组件中使用prop:["imgArr"],这个imgArr表示的是从父页面中传入的参数是imgArr,所以接收时必须用imgArr接收

就可以在子组件中使用img参数所传过来的值了

props中接收参数时2种定义方式。

props 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "props "：

注意: props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件

 

2.Axios数据请求

Axios是数据请求的方式之一，

如何使用Axios

先安装Axios :npm instal