Advanced Vue.js - Directives, Plugins, and Render Functions Chapter 17All the other elements and components will fit inside the array we have just created for the
title.
We need an element that will take the value and display a greeting. For this, we
can build a Vue component.
In the following code, we are using a regular JavaScript function instead of an arrow
function; this is because we want a reference to the component itself. Arrow functions don't
allow you to modify the scope of this, while this depends on how the function is called
and can be optionally bound to any variable in regular functions. In our case, it will be
bound to the instance component.
After the title of the page, we add the following component in the same array:
h(
{
render: function (h) {
const self = this
return h('div', [
'Your name is ',
h('input', {
domProps: {
value: self.name
},
on: {
input (event) {
self.name = event.target.value
}
}
}),
h(
'p',
'Hello ' + self.name +
(self.exclamation? '!' : ''))
])
},
data () { return { name: '' } },
props: ['exclamation']
},
{
props: {
exclamation: true
}
}
)The component has three options: the render, data, and props functions.