vue知识点之对象可计算的属性名

一、引出问题

在Vue中，当你在组件中使用components选项注册局部组件时，通常会直接写成components: { ButtonName: Button }。然而，有时你会看到使用数组索引语法components: {[componentName]: component}。

这主要是为了动态注册组件名称，尤其是在组件名称是在运行时确定的情况下。使用方括号语法可以创建一个计算属性的键名。

二、解决问题

JavaScript中可以通过点号(.)或者方括号([])与属性名结合访问对象属性，但是如果属性名包含了 特殊字符 或者 中文 ，亦或是需要通过计算才能够得到属性名，则用方括号和计算组合获取。

⏰ 示例一

let obj = {};
let a = "a";
obj['b B'] = "Bb"; // 属性名中有空格
obj[a + ' A'] = "Aa"; // 属性名由表达式计算得到
console.log(obj);// {b B: "Bb", a A: "Aa"}

在字面量对象中用属性和值的方式使用可计算的属性名

let a = "a";
let obj = {
　　['b B'] : "Bb",
　　[a + ' A'] : "Aa"
};
console.log(obj)
//{b B: "Bb", a A: "Aa"}

⏰ 示例二

例如，如果你的组件名称存储在一个变量中，你可以这样做：

const componentName = 'Button';
const component = SomeButtonComponent;
export default {
　　components: {
　　　　[componentName]: component,
　　},
};

javascript这样，不论componentName的值是什么，它都会被用作components对象中的键名，而SomeButtonComponent会被注册为此键名对应的组件。

这种方法在处理动态组件名或从外部数据源获取组件名时非常有用。它可以让你在不知道确切组件名的情况下，仍然能够注册和使用组件。