1、vue子组件调用父组件方法？
方法1：直接在子组件中通过this.$parent.event来调用父组件的方法
方法2：在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就可以了。
方法3：在父组件把方法传入子组件中，在子组件里直接调用这个方法
2、vue等单页面应用及其优缺点？
单页Web应用的优点：
1、提供了更加吸引人的用户体验：具有桌面应用的即时性、网站的可移植性和可访问性。
2、单页应用的内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷。
3、单页应用没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象
4、单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。
5、良好的前后端分离。后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。
单页Web应用的缺点：
1、首次加载耗时比较多。
2、SEO问题，不利于百度，360等搜索引擎收录。
3、容易造成Css命名冲突。
4、前进、后退、地址栏、书签等，都需要程序进行管理，页面的复杂度很高，需要一定的技能水平和开发成本高。
3、vue-router路由有几种模式？说说它们的区别？
一般常用的有两种：hash模式和history模式
区别：
hash模式：
1、url路径会出现 # 字符
2、hash值不包括在 HTTP 请求中，它是交由前端路由处理，所以改变hash值时不会刷新页面，也不会向服务器发送请求
3、hash值的改变会触发hashchange事件
history模式：
1、整个地址重新加载，可以保存历史记录，方便前进后退
2、使用 HTML5 API（旧浏览器不支持）和 HTTP服务端配置，没有后台配置的话，页面刷新时会出现404
4、vue-cli怎么解决跨域的问题？
可参考：vue-cli解决跨域问题_ahzhaihui的博客-CSDN博客_vue-cli解决跨域问题
5、使用vue开发过程是怎么做到接口管理的？
创建一个request.js用于封装axios，在 src/api/request，设置拦截器统一处理请求和相应。
封装 axios：request.js：
import axios from 'axios'
import {Message, Loading} from "element-ui"
import {getToken} from "@/utils/auth"
function Index({...config}) {
// create an axios instance
const service = axios.create({
/*headers: {
'Cache-Control': 'no-cache'
},*/
baseURL: config.baseURL || process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 30000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
return config
},
error => {
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response => {
return response
},
error => {
const {request = {}} = error;
const {status, response} = request;
error.status = status
try {
error.res = JSON.parse(response)
} catch (e) {
console.warn(e)
}
return Promise.reject(error)
}
)
/**
* 发起请求
* @param method 请求方法
* @param url 请求地址
* @param params 要发送的数据
* @param config 配置
* @param axiosConfig Axios配置项
* @returns {Promise<never>|Promise<AxiosResponse<T>>}
*/
const requestProcessor = (method, url, params, config, axiosConfig) => {
const headers = {}
const token = getToken().token
if (token) {
// let each request carry token
headers['Authorization'] = 'JWT ' + token
}
if (config.formData) {
const fd = new FormData();
for (let key in params) {
fd.append(key, params[key])
}
params = fd
}
switch (method.toUpperCase()) {
case 'GET':
return service.get(url, {
params,
headers,
...axiosConfig,
})
case 'POST':
return service.post(url, params, {
headers,
...axiosConfig,
})
case 'DELETE':
return service.delete(url, {
params,
headers,
...axiosConfig,
})
case 'PUT':
return service.put(url, params, {
headers,
...axiosConfig,
})
default:
return Promise.reject(new Error(`${method} 方法无效，请用正确的请求方法`))
}
}
this.service = async ({method, url, params, config = {}, axiosConfig = {}}) => {
const {isLoading = true, isToast = true} = config
let loadingInstance
isLoading && (loadingInstance = Loading.service({
fullscreen: true,
background: 'transparent',
text: '加载中...'
}))
try {
const response = await requestProcessor(method, url, params, config, axiosConfig)
// 此处可以再次拦截
return response.data
} catch (error) {
isToast && Message.error(error.message)
throw error
} finally {
isLoading && loadingInstance.close()
}
}
}
export const {request} = new Index()
export default Index
接口 listing.js：
import Request from "@/api/request"
const {service} = new Request()
export default {
userPostList({pageSize, page}) {
return service({
method: 'get',
url: '/userpostlist/',
params: {
pageSize,
page
},
config: {
isLoading: false
}
})
}
}
在 Vue 组件中使用：
import listing from "@/api/listing"
export default {
mounted() {
this.getList()
},
methods: {
getList() {
this.isLoading = true
listing.userPostList({
pageSize: this.pageSize,
page: this.currentPage,
}).then(data => {
this.currentPage = parseInt(data.currentPage)
this.total = data.total
this.list = data.results
}).finally(() => {
this.isLoading = false
})
}
}
}
6、vue与原生app交互？vue与app的交互方法？
通过url传输数据：（一般是在入口页面传下app的用户信息进来供vue h5使用）
methods: {
// 接收url后的数据
urltext() {
let loc = location.href; 6 let n1 = loc.length;//地址的总长度
let n2 = loc.indexOf("=");//取得=号的位置
let outToken = loc.substr(n2 + 1, n1 - n2);//从=号后面的内容
console.log(loc,n1,n2,outToken)
this.outTokenPost(outToken) //传到处理函数
},
}
原生APP提供一个接口对象的引用（例如一个扫码的接口，可能还有回调函数以获得扫码结果）
思路就是万物通过window 进行交互
// 将vue组件的要回调的函数暴露出去
mounted:function(){
// 将subscanQRCallBack方法绑定到window下面，提供给外部调用
window['scanQRCallBack'] = (result) => {
this.subscanQRCallBack(result)
}
},
methods:{
scan(){
// alert('开始扫码了')
window.client.startScanQR('OS与js交互',scanQRCallBack) // 通过window调用app提供的client对象
},
subscanQRCallBack(result){
// alert('扫码结果6466：'+result);
this.scanPost(result)
},
}
7、vue组件间通信有哪几种方式？
一般组件通信可用：props、 $emit
更多及详细可参考：Vue 组件间通信六种方式（完整版）_张飞鹏的博客-CSDN博客_vue组件通信
