组件及组件间通信、路由、axios发起AJAX请求

1、组件间通信：此方式用于父组件向子组件传递‘标签数据’

子组件：Child.vue

<template>

<div>

<slot name="xxx">不确定的标签结构 1</slot>

<div>组件确定的标签结构</div>

<slot name="yyy">不确定的标签结构 2</slot>

</div>

</template>

父组件：Parent.vue

<child>

<div slot="xxx">xxx 对应的标签结构</div>

<div slot="yyy">yyyy 对应的标签结构</div>

</child>

2、axios发起AJAX请求

axios：通用的 ajax 请求库

// 引入模块

import axios from 'axios'

// 发送 ajax 请求

axios.get(url)

.then(response => {

console.log(response.data) // 得到返回结果数据

})

.catch(error => {

console.log(error.message)

})

3、路由

路由组件：Home.vue  ；  About.vue

应用组件：App.vue

<div>

<!--路由链接-->

<router-link to="/about">About</router-link>

<router-link to="/home">Home</router-link>

<!--用于渲染当前路由组件-->

<router-view></router-view>

</div>

路由器模块: src/router/index.js

注册路由器: main.js

编写使用路由的 3 步：*定义路由组件  *注册路由  *使用路由

路由可嵌套