Does the render function not run in a single page component in vuejs?
study the functional components of vuejs:
official website link: ide/render-function.html-sharp%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6" rel=" nofollow noreferrer "> functional components
in version 2.5.0 and above, if you use a single file component, a template-based functional component can declare < template functional > < / template >
but for the project I built with vuejs scaffolding, in a single-page component, the render function does not run at all:
write the test code as follows:
<template functional>
<div>template</div>
</template>
<script>
export default {
name: "custome-test-div",
render(createElement,context){
console.log(context);//
return h("div","render");
}
}
</script>
<style scoped>
</style>
run result:
I made an online demo:
https://codesandbox.io/s/yqmm.
on codesandbox.
to use the render function, remove < template > from
Hello, landlord! A functional component that is stateless (no responsive data) and no instance (no this context). So it was introduced to facilitate developers to define logically clear components. vue there is no render method in a single file, so it will not be executed.
your example can be changed to this:
1, portal
2, portal
the following is excerpted from the official website. You can take a closer look at it.
Note: in versions prior to 2.3.0, the props option was required if a functional component wanted to accept props,. In version 2.3.0 or above, you can omit the props option and properties on all components are automatically parsed to props.
in version 2.5.0 and above, if you use a single-file component, a template-based functional component can declare:
< template functional >
< / template >
everything a component needs is passed through context, including:
props: provides an array of all prop objects
children: VNode child nodes
slots: returns the function of all slot objects
data: to pass to the component's data object, and passes this component as a second parameter to createElement
parent: 's reference to the parent component
listeners: (2.3.0 +) an object that contains all event listeners registered on the parent component. This is just an alias pointing to data.on.
injections: (2.3.0 +) if the inject option is used, the object contains the properties that should be injected.
after adding functional: true, the simple update between the render functions of the anchor title component increases the context parameter, and after the this.$slots.default is updated to context.children, the this.level is updated to context.props.level.
< hr >
if it is helpful, please click to adopt it, thank you ~
your demo is wrong: the template option has a higher priority than the render option. Both options tell vue how to render the page, and only one can take effect.
remove the template code of demo to run the render function:
I wonder if the landlord has solved it? I took a look, the building main code is wrong, the first parameter of the rander function defines the createElement, is used under the time to write h?
in addition, the latest version of Vue also has a rander function in a single file and can coexist with template, but the priority of the rander function is lower than that of template. To put it bluntly, writing template will cause rander not to execute (but not without this function).
