vue3 什么是属性解构
时间: 2023-05-26 14:02:20 浏览: 50
属性解构是指从一个对象中按照特定的属性名称提取出多个属性,并将它们赋值给新的变量。例如,有一个对象 obj,其中包含 name 和 age 两个属性,可以使用属性解构方法获取这两个属性,代码如下:
```
const obj = { name: 'John', age: 30 };
const { name, age } = obj;
console.log(name); // 'John'
console.log(age); // 30
```
在 Vue 3 中,属性解构可以用于从组件 props 中获取属性值,例如:
```
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
</div>
</template>
<script>
export default {
props: {
article: {
type: Object,
required: true,
},
},
setup(props) {
const { title, content } = props.article;
return {
title,
content,
};
},
};
</script>
```
在上面的代码中,通过属性解构将 article 对象中的 title 和 content 属性提取出来,并将它们赋值给新的变量,在 return 中返回。这样,在模板中就可以直接使用 title 和 content 变量了。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)