vue3 常见的一些问题 及常用的一些方法
最近在学vue3 把一些常见的问题记录下来1.怎么动态绑定图片首先动态绑定的图片一定要放到public文件夹下,这样才能读取。比如public 下的 img 下的 logo.png引入方式是<template><div><img :src="img" alt=""></div></template><script>export
最近在学vue3 把一些常见的问题记录下来
1. 怎么动态绑定图片
2. keep-alive 缓存组件状态,当组件在 keep-alive内被切换时,它的 mounted 和 unmounted 生命周期钩子不会被调用,取而代之的是 activated 和 deactivated。(这会运用在 keep-alive 的直接子节点及其所有子孙节点。),把需要缓存的组件包裹进 keep-alive里就好
3. activated() 这是组件里的一个生命周期函数,当缓存的组件重新被点击激活时调用,一般和keep-alive配合使用
4. vue获取当前点击的元素,在点击事件中传入$event,$event.target获取当前点击的元素,$event.currentTarget获取绑定当前事件的元素
5. 子组件向父组件派发事件 this.$emit(“事件名”,参数1,参数2)
6. $forceUpdate() // 强制视图界面更新
7.解决跨域访问的问题 在服务器返回的头部信息里加入一些字段即可,以Python为例,看下面的例子
1.怎么动态绑定图片
首先动态绑定的图片一定要放到public文件夹下,这样才能正常读取。比如public 下的 img 下的 logo.png引入方式是
<template>
<div>
<img :src="img" alt="">
</div>
</template>
<script>
export default{
data(){
return{
img:"/img/logo.png"
}
}
}
</script>
2. keep-alive保存组件状态
组件之间来回切换时默认会重新渲染,使用keep-alive包裹后就能把组件缓存下来,避免不必要的重复渲染,例如
// 如果在路由中有一个keepalive的值,就把此组件设置为缓存组件,否则就不缓存
{
path:'/',
component:home,
meta:{ keepalive:true }
}
<keep-alive>
<router-view v-if="this.$route.meta.keepalive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepalive"></router-view>
3.activated() 这是组件里的一个生命周期函数,当缓存的组件重新被点击激活时调用,一般和keep-alive配合使用,例如
// 如果一个keep-alive组件里有一个计数器count,当切换组件时这个count值是不会改变的,
// 加入这个函数后,每次切换回这个组件时就会执行一次这个函数,从而改变count的值
activated(){
if(this.count>10){
this.count=0
}
}
- vue获取当前点击的元素
<template>
<div @click="myClick($event)"><a>点击我</a></div>
</template>
export default{
methods:{
myClick(el){
el.target // 获取当前点击的元素
el.currentTarget // 获取绑定当前事件myClick的元素,也就是div元素
}
}
}
7.解决跨域访问的问题 在服务器返回的头部信息里加入一些字段即可,以Python为例,看下面的例子
# 处理客户端请求函数
def service_client(self,new_socket,root_path):
# new_socket.setblocking(False)
request=bytes()
# 允许跨域访问
response = 'HTTP/1.1 200 OK\r\n'
response += 'Access-Control-Allow-Origin:*\r\n' #允许请求的源,*表示所有源的请求都可以
response += 'Access-Control-Max-Age: 1800\r\n'
response += 'Access-Control-Allow-Credentials:true\r\n'
response += 'Access-Control-Allow-Methods:GET,POST,PUT,POST\r\n'
response += 'Access-Control-Allow-Headers:x-requested-with,content-type\r\n'
response += '\r\n'
new_socket.send(response.encode('utf-8'))
更多推荐
所有评论(0)