setup
1、Vue3.0中一个新的配置项,值为一个函数。
2、setup是所有Composition API(组合API)“表演舞台”。
3、组件中所用到的:数据、方法等等,均要配置在setup中。
4、setup函数的两种返回值:
- ①若返回一个对象,则对象中的属性、方法,在模板中均可以直接使用。(重点)
- ②若返回一个渲染函数:则可以自定义渲染内容。(了解)
5、注意点:
- ①尽量不要与Vue2.x配置混用
* Vue2.x配置(data、methods、computed…)中可以访问到setup中的属性、方法。
* 但在setup中不能访问到Vue2.x配置(data、method、computed…)。
* 如果有重名,setup优先
- ②setup不能是一个async函数,因为返回值不再是return的对象,而是promise,模板看不到return对象中的属性
<template>
<h1>一个人的信息</h1>
<h2>姓名:{{ name }}</h2>
<h2>年龄:{{ age }}</h2>
<h2>性别:{{ sex }}</h2>
<button @click="sayHello">你好</button>
<button @click="sayWelcome">欢迎</button>
</template>
<script>
// import { h } from "@vue/runtime-core";
export default {
name: "App",
data() {
return {
sex: "男",
};
},
methods: {
sayWelcome() {
alert("欢迎光临");
},
},
//此处测试setup,暂时不考虑响应式
setup() {
//数据
let name = "张三";
let age = 18;
//方法
function sayHello() {
alert("我叫" + name + ",我" + age + "岁了。你好啊!");
//模板字符串
// alert("我叫${name},我${age}岁了。你好啊!");
}
//返回对象
return {
name,
age,
sayHello,
};
//返回渲染函数
// return () => {
// return h("h1", "渲染内容");
// };
// return () => h("h1", "渲染内容");
},
};
</script>
<style>
</style>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)