Detailed explanation of SetupContext function in Vue3: Master the use of Vue3 component API

With the official release of Vue3, Vue.js developers can begin to develop using its new features and API methods. Among them, the SetupContext function is an important API method in Vue3, providing many convenient functions so that we can better write Vue3 components. In this article, I will introduce the usage of SetupContext function in detail.

1. What is the SetupContext function?

SetupContext function is an API method provided in Vue3. It is called inside the setup() function of the component. This function returns an object containing the following properties:

props: props parameters received by the component;
attrs: all undefined attributes of the component;
slots: component slot;
emit: Custom events for components.
We can get information such as props, slots and custom events passed in the component by introducing the SetupContext function and using it in the setup() function.

2. Props attributes

In Vue3, we no longer need to declare the props parameters that need to be used in the detailed configuration of the component. Instead, in the component's setup() function, get the incoming props parameters by using the props attribute.

In this way, we no longer need to use this.$props to get the passed props parameters like in Vue2. For example:

// Get props parameters in Vue2
props: ['message'],
mounted() {
console.log(this.$props.message)
}

//Get the props parameters from the props attribute in Vue3
setup(props) {
console.log(props.message)
}
In Vue3, get the props parameters It becomes very simple in itself. In the component's setup() function, the received props parameters can be directly accessed by using the props attribute.

If the props parameter of a component is an object, and all its properties need to be used in the setup() function. Assignment can be done using destructuring syntax. For example:
setup({ message, author }) {

console.log(message, author)

}
In this example, we use object destructuring syntax to assign the message and author properties in props to the variables message and author.

It should be noted that the props parameter in Vue3 has become a read-only property and does not support two-way binding. If we need to modify the props parameters, we need to send messages to the parent component through the emit() method.

3. Attrs attribute

In addition to the props attribute, the SetupContext object also contains the attrs attribute. This property contains all undefined properties in the component. For example:
// Our component is defined as follows:
props: {
message: String
},
setup(props, {attrs}) {

console.log(attrs.color) // 'red'

}

// When using the component, a color attribute is passed
27b3b39f1f3dc2bbcec9683da32de1ea
In this example, We define an example-component component and pass it an undefined color property. When using the SetupContext function, we can get this undefined attribute through the attrs attribute.

It should be noted that the attrs attribute in Vue3 is also a read-only attribute and does not support two-way binding.

4. Slots attribute

Vue3 also provides slots attribute, which is exactly the same as Vue2. We can use the slots attribute to access the slots passed in the component. For example:

// Our component is defined as follows
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

<h1>{{ title }}</h1>
<slot></slot>

16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

setup(props, { slots }) {
console.log(slots.default())
}

// When using the component, two lines of text are inserted
663603caa420dd21dd2d2832ad3064aa
e388a4556c0f65e1904146cc1a846beeFirst line of text94b3e26ee717c64999d7867364b1b4a3
e388a4556c0f65e1904146cc1a846beeSecond line of text94b3e26ee717c64999d7867364b1b4a3
9711b247f42f43ca3168f4ff0acf0adf
In this example, we define an example-component component and insert two lines of text into its slots. In the setup() function, we use the slots attribute to access these two lines of text.

It should be noted that the slots in Vue3 are divided into default slots and named slots. Therefore, when obtaining named slots, you need to obtain them through slots[name]().

5. Emit method

It is completely consistent with Vue2. The emit method provides the function of the component transmitting messages to the parent component. In Vue3, the emit method can also be called in the setup() function and accessed through the object returned in the setup() function. For example:

// The parent component is defined as follows
4cbd4287dc694340504c2f232e73ffce

// The subcomponent is defined as follows
setup(_, { emit }) {

function handleClick() {
  emit('example-event', 'example data')
}
return {
  handleClick
}

}
In this example, we define a handleClick method to pass the event example to the parent component -event and accompanying data example data.

It should be noted that the emit() method in Vue3 has become a read-only method, and we cannot modify its behavior.

6. Conclusion

In this article, we discussed the SetupContext function in Vue3 and its properties and methods in detail. Mastering these Vue.js 3 features and API methods allows us to write Vue3 components more flexibly and better adapt to various business scenarios.

The above is the detailed content of Detailed explanation of SetupContext function in Vue3: Master the use of Vue3 component API. For more information, please follow other related articles on the PHP Chinese website!