Shulou(Shulou.com)05/31 Report--

This article mainly explains "what are the practical skills of the secondary packaging of Vue components". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the practical skills of the secondary packaging of Vue components".

Transparently transmitted Attribute

We can use a v-bind with no parameters to achieve the transparent transmission of props,events, which applies all the attributes of an object to the target element or component as attribute, which is detailed in the official documentation.

Among them, $attrs contains objects whose components can pass through properties, including props,events, class,style,id and so on. (does not include props, emits, and slots explicitly declared by the receiving component)

The following is a default vacuumable component that encapsulates el-input. Since we have already declared clearable in defineProps, we need to explicitly pass the clearable attribute at this point

{{label}} defineProps ({label: String, clearable: {type: Boolean, default: true,},})

If we do not want to pass through certain attributes such as class, we can do so through useAttrs

{{label}} import {computed, useAttrs} from 'Vue';defineProps ({label: String, clearable: {type: Boolean, default: true,},}); const attrs = useAttrs (); const filteredAttrs = computed (() = > {return {... attrs, class: undefined};})

Another disadvantage of the above encapsulated components is that we will not be able to use the slot provided by el-input itself. Let's implement a component that can pass through slot.

Transparently transmitted slot

Slot can be transmitted transparently in the following ways

Ordinary slot

If there is less slot to pass through, we can pass through the slot by defining and using the slot inside the package.

Dynamic slot name

If the slot that needs to be passed through is not fixed or more, we can pass through the name of the dynamic slot.

The following is a transparent el-input component of slot

{{label}} defineProps ({label: String, clearable: {type: Boolean, default: true,},}); scope slot

If you need to encapsulate a component that uses a scope slot, we can pass through the scope slot.

Encapsulating problems in components invocation of component instance properties and methods

After encapsulating the component, we cannot call the properties and methods in the component instance as before. For example, BaseButton has a focus method. Before encapsulation, we can call it in the following way

/ / call BaseButton's component parent component / / const button = ref (); button.value.focus ()

For the packaged component, since button points to our MyButton at this time, not to the instance of BaseButton, we need to declare and expose the BaseButton case in the wrapped component

/ / our encapsulated component / / MyButton.Vue// const button = ref ()

Note that if we use it, there is no way to access the properties in the instance. For more information, please see vuejs.org/api/sfc-scr.

At this point, you can explicitly expose the ref property through defineExpose

/ / our packaged component / / MyButton.Vue// const button = ref (); defineExpose ({button})

Then I can call the encapsulated component through the instance chain in the parent component

/ / const button = ref (); button.value.button.focus () Thank you for your reading, these are the contents of "what are the practical skills of the secondary packaging of Vue components". After the study of this article, I believe you have a deeper understanding of what the practical skills of the secondary packaging of Vue components are, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.