Preface
props refers to the parent component passing parameters into the child component. Let's introduce how to understand the principle of vue3 props
introduce
Before understanding its principle, we must be clear about what the virtual node of vue is and what it ishaves.
- Virtual nodes are mainly divided into two types, namely component types and element types, and of course, there are special virtual nodes such as text types.
- Virtual nodes will receive three basic parameters, namely type, props, children
For component types:
type is an object that includes basic render function and setup function, etc.
{
render() {
return h() // The render function returns a virtual node }
setup() {}
}props are parameters passed in by the parent component to the child component
children is the slot passed to the child component by the parent component.
For element types:
- type is the element type of the current node, such as div
- props are element attributes of the current node, such as class
- children are the child elements of the current node, which are an array. The content of the array may be a component or an element.
principle
premise
Based on this, we can create two components that are parent and child, namely APP component (parent) and FOO component (child)
import { h } from '../';
import { Foo } from './';
export const App = {
// render page element content is template render() {
// Receive a Foo and create a child component node2 through the h function let node2 = h(
Foo,
{
count: 1
},
{}
)
return h(
'div',
{
id: 'root',
},
[
node2 // The App receives the Foo component as its child component ]
);
},
setup() {
}
};import { h } from '../';
// Define a Foo component to verify Props functionalityexport const Foo = {
// render page element content is template render() {
// ui page content const foo = h(
'div',
{},
'Foo' +
);
return h('div', {}, [foo]);
},
// The first parameter props is used to pass values for parent and child components setup(props) {
(); // Print the passed props value }
};Through the above code we can see that two files are created here representing the parent component and the child component.
During the compilation process of vue3, we will first parse the component and pass the component intopatch function, determine whether the current virtual node type is a component or an element, and then go to the following compilation.
In the parent component code above, I can see that for Foo, we created a component called node2, and passed a props with count: 1 in the position of props.
let node2 = h(
Foo,
{
count: 1
},
{}
)Because vue will recursively parse each virtual node, this node2 will also be parsed in the end. ! ! !
The following introduces what was done when parsing this node2 and how to implement the props function
Create component instance object
If it is a component type, pass the virtual node of our component as a parameter increateComponentInstance，Go to create oneComponent instance object,as follows:
export function createComponentInstance(vnode) {
const component = {
vnode,
type: ,
// Create an empty setupState first, and temporarily store the setup return value of the virtual node of the component type setupState: {},
// Create a props to store the props received by the component virtual node. Note: props are not allowed to be changed (props) props: {},
}
return component
}Because when we create a vnode, we will actually receive three basic parameters, namely type, props, children
So the vnode passed here will have a props field, and this props field is count: 1 (reviewed)
Suppose we create a component instance object in this step, calledinstance
Initialize Props operations
becauseinstanceIt receives vnode, and the vnode of the component actually contains props
So then execute ainitPropsIf props exist in vnode, then the props will be mounted toinstanceIn the props field under
// Mount the passed props to the component instance objectexport function initProps(instance, props) {
= props
}At this time, the component instance object can get the props value normally
Create a proxy object to get Props
Because we know that in the code we can passthis.to get the value of props, and props have been mounted into the component instance object.
So create a proxy object (Then, this object is mounted to render function and other locations through bind. When this is the case, props are mapped to the corresponding props.）
= new Proxy({ _: instance }, PublicInstanceProxyHandlers);
const PublicInstanceProxyHandlers = {
get({ _: instance }, key) {
const { setupState, props } = instance
// If in the passed props, the corresponding value returned (props) if (hasOwn(props, key)) {
return props[key]
}
}
}props are passed into the setup as a parameter
Because we know that there is no this in setup in vue3, but we can receive a prop and use this prop to get the value passed in by the parent component.
Then we have mounted the value of props to the component instance object, so we can pass props as parameters into the setup.
const {setup} = // Get the setup function// Pass props in when executing setupsetup(shallowReadonly())Therefore, when we use it, we can read the value in the setup by receiving props.
// The first parameter props is used to pass values for parent and child componentssetup(props) {
(); // Print the passed props value}Mount proxy on render
When parsing a virtual node, the setup function will be executed first and then the render function will be executed, because we can use it throughthis.to get the value of props.
So we mount the proxy object we created before into the render function through bind to ensure that this can correctly get the value of props.
()
Summarize
Here we will finish the principle of props.
props are actually parameters inserted by the parent component into the props of the virtual node of the child component.
Therefore, when we create a component instance object of a child component, we can get the value of this props and mount it to the component instance object of the child component.
If you need to use props in the component, usually two locations setup or render
For setup, we can pass in the props of the component instance object as a parameter, so that we can use it, but note that props are a value that cannot be changed, so we need to wrap it with readonly.
In the component page, we can read the props value through this., so when the rendering page is called, we can create a proxy object, mount this object into the render function, and read the corresponding props value through proxy
This is the article about in-depth understanding of the principles and use of props in Vue3. For more related Vue3 props content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!