Functional component
Vue provided onefunctional
Is set totrue
You can make components stateless and instanced, that is, withoutdata
Andthis
Context. Use this wayrender
Functions that return virtual nodes can be rendered more easily because the functional component is only a function and the rendering cost is much lower.
When using a functionalized component, the Render function provides the second argumentcontext
To provide a temporary context. Required by componentdata
、prop
、slots
、children
、parent
Is passed through this context. such asthis.level
To rewrite ascontext.props.level
,this.$slots.default
Change tocontext.children
.
Use functional components to show a scenario of intelligently selecting different components according to data:
< pdata-height = “365” data-theme-id = “0” data-slug-hash = “mkrgm” data-default-tab = “html, result” data-user = “whjin” data-embedded-version = “2” data-pen-title = “vue-functional component-select component according to data” class=”codepen”>See the PenVue- Functionalized Component-Select Components Based on Databy whjin (@whjin) onCodePen.</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Functionalized components are mainly applicable to the following two scenarios:
- Programmatically select one of a plurality of components.
- In will
children
、props
、data
Operate the subcomponents before passing them to them.
JSX
In order to make the Render function write and read better, Vue provides plug-insbabel-plugin-transform-vue-jsx
To support JSX syntax.
UsecreateElement
Common configuration:
<p data-height=”365″ data-theme-id=”0″ data-slug-hash=”Vdpwpz” data-default-tab=”js” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-createElement” class=”codepen”>See the PenVue-createElementby whjin (@whjin) onCodePen.</p>
<script async src=”https://static.codepen.io/ass …; ></script>
JSX writing:
<p data-height=”300″ data-theme-id=”0″ data-slug-hash=”eKvYvm” data-default-tab=”js” data-user=”whjin” data-embed-version=”2″ data-pen-title=”Vue-JSX” class=”codepen”>See the PenVue-JSXby whjin (@whjin) onCodePen.</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Actual Combat: Using Render Function to Develop Sortable Table Components
All contents (header and row data) of the table component consist of twoprop
Composition:columns
Anddata
. Both are arrays,columns
Used to describe the information of each column, and rendered in the header<head>
, you can specify whether a column needs sorting;data
When each row of data, bycolumns
Decide the order of the columns in each row.
In order for the sortedcolumns
Anddata
Does not affect the original data, tov-table
Component ofdata
Option to add two corresponding data, all operations of the component will be completed on the two data, without any processing of the original data.
columns
Each item of is an object, wheretitle
Andkey
The field is required to identify the header title of this column.key
Correspondence ofdata
The field name of the contents of the column in.sortable
Is an optional field, if the value istrue
, indicating that the column needs sorting.
v-talbe
Component ofprop:columns
Anddata
The data of has been transferred from the parent.v-table
Instead of using them directly, use themdata
Of optionscurrentColumns
AndcurrentData
. So inv-table
During initialization, thecolumns
Anddata
Assign tocurrentColumns
AndcurrentData
. Inv-table
Themethods
Option to define two methods for copying, and in themounted
Called within the hook.
map()
Is a method of JavaScript array, reconstructing a new array according to the function passed in.
Sort by ascending order (asc
) and descending (desc
) two, and at the same time can only sort one column of data, mutually exclusive with other columns, in order to identify the sorting status of the current column, inmap
When adding data to columns, one is added to each column by default_sortType
And is assigned tonormal
A that represents the default sort (that is, no sort).
After sorting,currentData
The order of each item may change, so givecurrentColumns
AndcurrentData
Each data of is added_index
Field that represents the index of the current data in the original data.
render(h) {
var ths = [],
trs = [];
return h('table', [
h('thead', [
h('tr', ths)
]),
h('tbody', trs)
])
}
Hereh
exactlycreateElement
, just changed the name.
Table topictrs
Is a two-dimensional array, data bycurrentColumns
AndcurrentData
Composition.
First, all rows are traversed, then each column is traversed within each row, and finally the topic content node is combined.trs
.
Ifcol.sortable
No definition, or value isfalse
, just put directlycol.title
Render it, otherwise in addition to renderingtitle
, also added two<a>
Element to implement ascending and descending operations.
Sorting with JavaScript arrayssort()
Method, the reason for returning here1
Or-1
Instead of returning directlya[key]<b[key]
, that is to saytrue
Orfalse
Because in some browser pairssort()
The treatment of different, and1
And-1
Can be compatible.
Before sorting, reset the sorting status of all columns tonormal
, and then set the sort status of the current column (asc
Ordesc
For those that use render<a>
elementaryclass
Nameon
, followed by CSS to highlight the sorting status of the current column.
After rendering the table, the parent modified itdata
Data, such as additions or deletions,v-table
ThecurrentData
It should also be updated. If a column already has a sort status, the sort should be processed directly after the update.
Through traversalcurrentColumns
To find out whether it has been sorted by a certain column, and if so, to sort the updated data according to the current sorting status.
< pdata-height = “365” data-theme-id = “0” data-slug-hash = “xymmjr” data-default-tab = “html, result” data-user = “whjin” data-embedded-version = “2” data-pen-title = “vue-sortable table component” class=”codepen”>See the PenVue- sortable table componentby whjin (@whjin) onCodePen.</p>
<script async src=”https://static.codepen.io/ass …; ></script>
Actual Combat: Message List
To publish a message, the required data include nickname and message content. The publishing operation should be at the root instanceapp
Complete in. The data of the message list is also fromapp
Get.
arraylist
Stored all the message content, through the functionhandleSend
tolist
Add a message data, add intotexrarea
The text box is empty.
Node Usage within Render Functionv-model
: dynamic bindingvalue
And listeninput
Event, the input content through$emit('input')
Dispatched to the parent component.
List datalist
When empty, render a “list is empty” message node; When not empty, eachlist-item
Winning includes nickname, message content and reply button 3 sub-nodes.
this.list.forEach
Equivalent totemplate
From insidev-for
Command, traverse out each message. handlehandleReply
Dispatch an event directly to the parent componentreply
, parent component (app
After receiving, the currentlist-item
The nickname of the extraction, and set tov-textarea
Inside.
< pdata-height = “365” data-theme-id = “0” data-slug-hash = “zrkgrr” data-default-tab = “html, result” data-user = “whjin” data-embedded-version = “2” data-pen-title = “vue-message list” class=”codepen”>See the PenVue- message listby whjin (@whjin) onCodePen.</p>
<script async src=”https://static.codepen.io/ass …; ></script>