最近在学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
	}
}
  1. 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'))
Logo

前往低代码交流专区

更多推荐