Skip to main content

遇到的问题

vue3 自定义组件（component ）失效​

如果使用<script setup>写法的vue3文件中，使用component有可能失效，组件被直接渲染成纯html名字的标签

原因：

  • 个人认为，组件在<script setup>没有被正确的注册

  • 官方解析，动态组件不能使用简单的变量，要以组件名显式使用，说法比较模糊不好理解，官方链接

解决：

  • 再添加一个script标签，显式得注册要动态渲染的组件，这样可以无视官方的奇怪规则，同时显式的生命有助于后期更好的维护
<component :is="tabMap[localStore.currtMode]"></component>

<script lang="ts">
import TabCrop from './tabCrop.vue';
import TabPictureInfo from './tabPictureInfo.vue';

const tabMap: {
  [key: string]: string; // tab名称
} = {
  'crop': 'TabCrop',
  'picture-info': 'TabPictureInfo',
};

export default { components: { TabCrop, TabPictureInfo } };
</script>

参阅文献：

vue3 watch 报错 Invalid watch source​

ue warn]: Invalid watch source: 297x210 A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.

watch的第一个参数仅支持：ref类型，函数，响应式对象，不支持任何基础类型，基础类型必须使用函数进行包裹

// 错误写法：
// 代码写法，这里的props.visible是一个boolean类型
watch(props.visible, (newVal) => {
    if (newVal) {
        xxxx....
    }
})
// 正确写法
watch(() => props.visible, (newVal) => {
    if (newVal) {
        xxxx....
    }
})