0%

Vue3 技巧

1. 渲染一个类似于 AntD 类似于 Message 的组件

该组件是在 vue 程序外调用的,也就是说我们需要重新执行 app.mount 来绑定到新的 dom
该组件的模版文件,最好是通过 vue 文件生成,而不应该直接在 tsx 中编写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//  edit tsx
import EditorCmp from "./components/editorRender.vue";
const app = createApp({
components: {
EditorCmp,
},
setup() {
const columnsOptions = reactive({});
const value = ref(EditParams.value);
return () => (
// @ts-ignore
<EditorCmp columnsOptions={unref(columnsOptions)} value={unref(value)} />
);
},
});

app.mount(Dom);

2. watch 无法监听 props

A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.

需要改成这样写

1
2
3
4
5
6
7
8
9
watch(
() => props.value,
(val) => {
formState.value[id] = val;
},
{
deep: true,
}
);

3. Vue3 使用 setup 语法糖后父组件$refs 无法使用调用子组件函数、属性的解决方法

使用 (defineExpose)[https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose]

1
2
3
4
5
6
7
8
9
10
11
<script setup>
import { ref } from "vue";

const a = 1;
const b = ref(2);

defineExpose({
a,
b,
});
</script>

4. Injection “Symbol(pinia)” not found

原因是未初始化 pinia 导致的,有些组件是脱离 main.js 运行的,需要手动初始化下 pinia

1
setupStore(this.CMP);