Advanced Vue.js - Directives, Plugins, and Render Functions Chapter 17The second parameter of the createElement function is to actually assign values to our
props:
{
props: {
exclamation: true
}
}This will be equivalent to writing :exclamation="true" when declaring the component.
You can easily understand the data and props options of the component. Let's examine
what we wrote in the render function.
In the first line of the function, we set self = this as a convenient way to refer to the
component were we to add any nested functions. Then, we return the result of a
createElement function (h) that, inside a div tag, places three things in the DOM. The first
is the raw text Your name is and then two elements: an input and a paragraph.
We don't have a direct equivalent of the v-model directive when working with render
functions. Instead, we implement it manually. We bind the value to the name, and then we
add a listener to the input event that will set the value of the state variable, name, to
whatever is inside the textbox.
We then insert a paragraph element that will compose the greeting phrase, adding an
exclamation point based on the value of the exclamation prop.
After the component, we can add the following, as illustrated, in the same array:
'Here you will find ', h('i', 'a flood '), 'of plumbers.'If you have done things right, you should be able to run the application and see the whole
page.
How it works...
In this example, we've seen a glimpse of what happens behind the curtains when Vue
compiles our templates; again, you are not advised to do this with regular components.
Most of the time, the result will be just more verbose with little or no gain. On the other
hand, there are a couple of cases in which writing the render function may actually result in
better or more robust code and cover some functionality that is difficult to express with
templates.