setup(props, context) {
...
}
1. Parameters
When using the setup function, it will accept two parameters:
- props
- context
Let's take a deeper look at how to use each parameter
2. Props
The first parameter in the setup function is props. As expected in a standard component, the props in the setup function are reactive and will be updated when new props are passed in.
export default {
props: {
title: String
},
setup(props, context) {
console.log(props.title)
...
}
}
Warning: Because propsit is reactive, you can't use ES6 destructuring, because it will eliminate the responsiveness of prop.
If a prop needs to be destructured, this can be done safely by using toRefs in the setup function
import {
toRefs } from 'vue
export default {
props: {
title: String
},
setup(props, context) {
const {
title } = toRefs(props)
console.log(title.value)
...
}
}
Three, context
The context parameter is an ordinary javascript object, which exposes three properties to the component: attrs, slots, emit.
export default {
setup(props, context) {
// Attribute（非响应式对象）
console.log(context.attrs)
// 插槽（非响应式对象）
console.log(context.slots)
// 触发事件（方法）
console.log(context.emit)
}
}
The context is a plain JavaScript object, that is, it is not reactive, which means you can safely use ES6 destructuring on the context.
export default {
setup(props, {
attrs, slots, emmit }) {
...
}
}
attrs and slots are stateful objects that are always updated when the component itself is updated. This means you should avoid destructuring them and always refer to properties as attrs.x or slots.x .
Note that, unlike props, attrs and slots are non-responsive. If you plan to apply side effects based on attrs or slots changes, you should onUpdateddo this in a lifecycle hook.
access component properties
When executing setup, the component instance has not been created yet. Therefore, you can only access the following properties:
- props
- attrs
- slots
- emit
In other words, you will not have access to the following component options:
- data
- computed
- methods
Inside setup(), this will not be a reference to the active instance , because setup() is called before other component options are resolved , so this inside setup() behaves completely differently than this inside other options. This can lead to confusion when using setup() with other options APIs.
1、attrs
Purpose: When the parent component passes data to the child component, the child component does not receive it through props, then the data passed by the parent component goes to the attrs attribute of the context in the setup.
<div id="app">
<!-- 父组件传递数据给子组件 -->
<son webName="自如初"></son>
</div>
<script>
const app = Vue.createApp({
});
// 子组件不使用props接收
app.component('son', {
template:`<div>son</div>`,
setup(props, context) {
const {
attrs, slots, emit} = context;
// 打印父组件传递的数据
console.log(attrs.webname);
return {
};
}
});
const vm = app.mount('#app');
</script>
2、slots
Used to receive the slot content passed by the rendering parent component
<div id="app">
<son>
父组件通插槽传递的内容
</son>
</div>
<script>
const app = Vue.createApp({
});
app.component('son', {
template:`<div>son</div>`,
setup(props, context) {
const {
h } = Vue;
const {
attrs, slots, emit} = context;
// 显示父组件传递的内容
return () => h('p', {
}, slots.default());
}
});
const vm = app.mount('#app');
</script>
3、emit
Fires an event to the parent component.
<div id="app">
<!-- 4、父组件监听子组件发射的事件 -->
<son @sclick="getData"></son>
</div>
<script>
const app = Vue.createApp({
methods: {
// 5、实现事件
getData () {
alert(1)
}
}
});
app.component('son', {
// 1、子组件中绑定事件
template:`<div @click="sonClick">son</div>`,
setup(props, context) {
const {
attrs, slots, emit} = context;
function sonClick() {
// 2、通过 emit 向父组件发射事件
emit('sclick');
}
// 3、对外暴露该事件
return {
sonClick };
}
});
const vm = app.mount('#app');
</script>
4. Use the rendering function
setup can also return a render function that can directly use reactive state declared in the same scope:
