How vue uses high-level components

This article mainly shows you "how vue uses high-level components". The content is simple and easy to understand and organized. I hope it can help you solve your doubts. Let Xiaobian lead you to study and learn this article "how vue uses high-level components".

higher-order components

1 General

//parent//child {{ label }}

2 Optimization

1 Every props passed from a parent component to a child component must be explicitly declared in the child component's Props to be used. In this way, our child components need to declare a lot of props at a time, and dom-native properties like placeholder can actually be passed directly from parent to child using $attrs without declaration. The method is as follows:

$attrs contains attribute bindings (except class and style) that are not recognized (and acquired) as props in the parent scope. When a component does not declare any props, all parent scope bindings are included and can be passed into internal components via v-bind="$attrs"-useful when creating higher-level components.

2 Notice that @focus="$emit ('focus ', $event)" of the child component does nothing but pass the event back to the parent component, which is similar to the above, there is no need to explicitly declare:

computed: { listeners() { return { ... this.$ listeners, input: event => this.$ emit('input', event.target.value) } }}

$listeners contains v-on event listeners (without the.native modifier) in the parent scope. It can be passed into internal components via v-on="$listeners"-useful when creating higher-level components.

Note that since our input is not the root node of the BaseInput component, attribute bindings of the parent scope that are not considered props by default will be "rolled back" and applied to the root element of the child component as normal HTML attributes. So we need to set inheritAttrs: false, these default behavior will be removed, the above two points of optimization to succeed.

The above is "how to use advanced components vue" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!