In the last tip “Easily switch to Composition API in Vue.js 3” I explained how to migrate the basic parts of a Vue.js Object API component to the new Composition API.
However, that’s not all. What happens with all instance properties we used to have, such as this.$emit
, this.$slots
, this.$attrs
and so? They were on the this
component instance, but there is no this
in Composition API.
In the same line, in the last tip I didn’t use props, and you used to access them via this
in the component instance. How the heck can you access it now?
The thing is, I haven’t explained the arguments of the setup
function when using Composition API.
Effectively, the first parameter of the setup
function receives all the component properties. Following the example from the last tip, let’s add two properties to use as the initial values for the money
and delta
local state variables:
export default {
props: {
money: {
type: Number,
default: 10
},
delta: {
type: Number,
default: 1
}
},
setup(props) {
const money = ref(props.money);
const delta = ref(props.delta);
// ...
}
};
#vue #vue.js #vue.js 3 #api #javascript