vue3所遇问题记录

weixin_heye

已于 2023-05-13 18:25:32 修改

阅读量274

点赞数

文章标签： vue.js 前端 javascript

于 2023-05-12 20:43:57 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45835723/article/details/130628025

版权

1.img的动态src

vite创建的项目 img标签的src属性使用动态绑定时本地调试时会把路径当成字符串并在前面加上localhost

解决：

url: (new URL(路径)).toString(),

// url: new URL(prefix.value + s),
//动态src不new url类型  无法加载成功  不转为string 删除图片时会报错（element-plus中的upload）

2.element-plus中默认语言为英文

官网提供两种方式

官网：https://element-plus.gitee.io/zh-CN/guide/i18n.html

方法1：

全局导入方式：在main.js加上以下代码：

 import ElementPlus from "element-plus";
 import "element-plus/dist/index.css";


// 解决element-plus默认英语
 import locale from "element-plus/lib/locale/lang/zh-cn";

app.use(ElementPlus, { locale });

方法2：

按需自动导入方式：app.js中使用 ConfigProvider 组件包裹App 组件

<template>
  <el-config-provider :locale="locale">
    <router-view></router-view>
  </el-config-provider>
</template>

<script setup>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn';

const { locale } = reactive({
  locale: zhCn,
});
</script>

3.defineExpose + provide +inject

示例：封装分页组件在分页组件中定义page、pageSize、total以及分页的方法，在列表页中复用并减少变量的定义

子组件中：

//子组件注入父组件提供的查询方法
const searchData = inject('searchData')


//定义响应式数据
const pageable = reactive({
    page: 1,
    pageSize: 10,
    total: 200
})

// 将内部属性进行解构成ref响应式
const { page, pageSize, total } = toRefs(pageable)

// 将定义的属性和方法暴露出去给父组件使用
defineExpose({
    page,
    pageSize,
    total,
    handleCurrentChange,
    handleSizeChange
})

父组件中：

<template>
     <PagerGroup ref="pageRef"></PagerGroup>
</template>

//绑定组件
const pageRef = ref(null)


// 将查询列表的方法提供给后代组件  使得分页组件中可以调用这个方法
provide('searchData', searchData)


//修改子组件defineExpose暴露出来的数据
onMounted(() => {
    pageRef.value.total = 600
})

可以将 provide + inject 直接使用 defindemit 实现触发父级的searchData方法此处只是为了能在子组件中直接调用父组件的方法写的示例