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