Before the start
- I need you. Vue Have some understanding , It's better to have read the official tutorial .
- contains Vue3 The content of , If you already know Vue2, But I'm not familiar with Vue3, You don't have to be afraid .
- It involves specific API Less details of use .
- I will Vue The component is divided into three parts ： Input 、 Internal processing 、 Output （ In fact, it can be understood as a function ）, This article is about “ Input ” The content of .
- How to understand “ Input ”
- Classification of component inputs
How to understand “ Input ”
Input , That is to say, to pass values to components or external factors that can cause changes in components . This article classifies all input methods of components , In order to clearly understand the data sources of components and external sources of changes .
Classification of component inputs
I divide the input into two categories , One is ： Explicit input , The second is ： Implicit input . I will introduce these two categories respectively .
Explicit input , seeing the name of a thing one thinks of its function , Explicit data passed to components .
As shown below , utilize
props Explicitly to
HelloWorld Component passes in a string “Welcome to Your Vue.js App”. You can almost rely on
HelloWorld Component passes in any value , but
HelloWorld The internal part of the component needs to be in the
props Define the name of the received property in the .
<HelloWorld msg="Welcome to Your Vue.js App" />
propsThe transmission value is Parent towards Sub level One of the ways to pass values .
propsPass in a callback function , Can also be realized Sub level towards Parent Pass value . here , Not only is “ Input ” It can also be used as a kind of “ Output ”（ Pass the value to through the parameters of the callback function Parent ）.
defaultIt can be understood as the default value of function parameters .
typeIt can be understood as the type of function parameter .
validatorThe verification of function parameters is understandable .
requiredIt can be understood as whether the function parameter is an optional parameter .
" Input " Not only can it be a specific number , It can also be an event （emits） Callback function for . This event contains
HTML The original event of , It also includes component custom events .
When a component is passed a
emits As defined in attribute When ,Vue The value will be automatically added to the root node by default attribute in . As shown below ,
Date The node composition of a component ：
<template> <div> // Other contents </div> </template>
We call ：
<Date class="my-date" />
Actually render to DOM Medium Date Components for ：
<div class="my-date"> //Date Component rendering of other DOM </div>
As shown above , Incoming
class Added to the
<div> On .
but , When a component has more than two root nodes （Vue2 Only one root node is allowed , and Vue3 More than one is allowed ）,Vue What will be done with ？
Vue It's up to you to choose , Use
v-bind="$attrs" Assign values to any of them A root node .
If you don't want to divide
emits Any value beyond the definition ？ To configure ：
If the root node doesn't want , And want to give the child node ？ Use
v-bind="$attrs" Assign values to any of them A dime node .
$attrs Belongs to instance property , Generally used to receive native
HTML Attribute of element . Is it used , It's entirely up to the component itself . >
$attrsyes Parent towards Sub level One of the ways to pass values .
stay Vue You can use the slot （slot） To do content distribution , Slots can also be considered as a kind of component “ Input ”. As shown below ,
Date Component added to
default In slot .
<HelloWorld> <Date msg="Hi" /> </HelloWorld>
msgThe value of , yes Grandparents towards Descendants One of the ways to pass values .
- when Scope slot When it comes to Parent towards Sub level One of the ways to pass values （ take
HelloWorldValue inside component , Pass to
This mainly refers to user-defined instructions . So why is a custom instruction considered a kind of “ Input ” 了 ？ Because the custom instruction can be applied to DOM Element to do the underlying operation , Affect the state of the component . For more details about the components, see the corresponding official documentation .
Explicit input summary
Let me take a look at the usage of a component that contains all explicit input ：
- msg by
- class by
- click by
- v-hour For customization
- Date and User Components for
slot, among User Components pass values through scope slots
<HelloWorld msg="Welcome to Your Vue.js App" class="my-hello" @clik="clickFn"> <Date v-hour="time" /> <template v-slot:user="slotProps"> <User :name="slotProps.name" /> </template> </HelloWorld>
Further observation , We can find out ： All explicit input is basically implemented by means of instructions ！（
$attrs With the exception of ）
- props With the help of v-bind
- emits With the help of v-on
- slot With the help of v-slot( The default slot may sometimes not be used explicitly )
- Custom instructions, let alone , It's an instruction in itself
v-model Instructions are also common input sources in components , But its essence is
emits The grammar sugar of , So it doesn't count in “ Input ” Inside the .
Implicit input , Refers to all the situations that can affect the state of a component except for explicit input . He's not “ Explicit ” Pass in , But it has an impact on the inside of the component .
Inside the component, through
inject You can get the data passed in by grandparents , Because you can't see it at a glance “ Input ”, And it's not always possible to know which component passed in the value , So inject （inject）, I classify it as implicit input .
Whether it's the global mix （mixin） Or just mix in the components , It is a kind of implicit transmission and processing method which is not easy to observe , So mix in , Also referred to as implicit input .
Extend another component （extends）, And mixin similar . So expand , It's also a kind of implicit input .
app.config.globalProperties Add global properties （property）, Any component instance can access ; And directly in Vue Add something like . Because it's a global attribute , It's a kind of “ Implicit ” Pass value , So it's a kind of implicit input .
- yes Grandparents towards Descendants One of the ways to pass values .
Implicit input summary
Implicit input is usually used to transfer values between grandchildren or to increase the reusability of components .
Summary of input
Finally, let's summarize ,“ Input ” What are the total ：
- Explicit input ：
- Implicit input :
- Reprint please indicate the source
- Impropriety , Welcome to communicate and correct