标签 vue3 下的文章

对于reactive类型的响应式数据,只需要按照文档中介绍的方法建立侦听器:

const x = reactive({ a: 1 });

watch(() => x.a, val => alert(1));

对于ref类型的数据,则需要多加一个value来获取到正确的侦听对象:

const x = ref({ a: 1 });

watch(() => x.value.a, val => console.log(val););

使用时必须注意,否则无法正确侦听。

对于数组、对象类型的数据,使用reactive比较方便,因为不需要使用.value获取此类数据的值。

element-plus 的图标其实是一个个的组件:

JavaScript:

import { IconName, IconName2 } from '@element-plus/icons-vue';

Template:

<el-icon>
    <IconName/>
</el-icon>

使用 :is 切换组件:

<component :is="bool ? IconName : IconName2"></component>

然而 :is 的值必须是引入的组件,不能是字符串,否则就会渲染成这个样子:

<iconname></iconname>

如果菜单结构单独放在一个文件中,比如 menu.js

export default [
    {
        name: 'Menu 1',
        icon: 'IconName'
    }
]

这里的 icon的值就不能是字符串,需要是一个组件对象的引用。这就需要先在 menu.js 中引入图标组件:

import { IconName } from '@element-plus/icons-vue';

然后将组件传给 icon

export default [
    {
        name: 'Menu 1',
        icon: IconName
    }
]

这样,就能够在组件中正确显示图标了。当然,这时候组件中就不需要再引入图标了。


End