vue3中ref获取不到组件实例&&数组中对象的属性值去重-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3中ref获取不到组件实例&&数组中对象的属性值去重。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、vue3中ref获取不到组件实例

原因：使用语法糖的组件是默认关闭的，也即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在<script setup>中声明的绑定。

解决方法: 为了在语法糖组件中明确要暴露出去的属性，使用 defineExpose 编译器宏将需要暴露出去的变量与方法放入暴露出去就可以了

jsdefineExpose({
    getList,
})

2、数组中对象的属性值去重

方法一：

let list = [
        {name:'张三',age:1,},
        {name: '李四',age: 10,},
        {name: '王二',age: 15,},
        {name: '赵五',age: 17,},
        {name: '王二',age: 5,},
        {name: '李四',age: 19,},
    ];
let newList = [];
list.forEach((item) => {
    newList.push(item);
    // 去重
    const ChangeArr = (data) => {
        const newobj = {};
        if (data && data.length > 0) {
            data.forEach((item) => {
                newobj[item.name] = item;
            });
        }
        return newobj;
    };
    let obj = ChangeArr(newList);
    newList = Object.values(obj);
});
console.log('🚀', newList)

方法二：

let list = [
   {name:'张三',age:1,},
   {name: '李四',age: 10,},
   {name: '王二',age: 15,},
   {name: '赵五',age: 17,},
   {name: '王二',age: 5,},
   {name: '李四',age: 19,},
 ];
let obj = {};
list = list.reduce(function (item, next) {
    obj[next.name] ? '' : obj[next.name] = true && item.push(next);
    return item;
}, []);
console.log('🚀', list)

3、筛选符合需要的字段并添加到新数组中(动态添加表单)文章来源地址https://www.toymoban.com/news/detail-508095.html

let arr = [];
Object.getOwnPropertyNames(this.msgTypeInData).forEach((item,index) => {
     if(item.indexOf('cardNum') !== -1) {
     arr.push({
        amount:this.msgTypeInData.amount,
        cardNum: this.msgTypeInData[item],
        })
     }
})
console.log('🚀', arr)

Object.getOwnPropertyNames(obj)返回一个由指定对象的所有自身属性的属性名（包括不可枚举属性但不包括 Symbol 值作为名称的属性）组成的数组

到了这里，关于vue3中ref获取不到组件实例&&数组中对象的属性值去重的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！