[Vue] how to better package components? A few tips will help you become a master of component packaging and make our packaged components more elegant and easy to use


1, $attrs

In the process of using components, we sometimes need to pass Prop to encapsulated sub components
For example:

    <el-input v-model="innerVal" placeholder="placeholder"

  export default {
    name: "MyInput",

<style scoped>


We encapsulate the my input component again
Requirement: pass the original clear attribute of El input to my input component
Original practice:
We can declare the clear attribute in the my input component and receive the clear attribute through the my input component

Then pass it to the El input component:

Parent component did not pass a clearable value:

The parent component passes the clearable value:

However, if each Prop requires a parent component declaration and then passes it to the child components one by one, it will be too troublesome

At this point, we can use the $attrs attribute on the component instance to simplify the process

This property contains the Prop that the component is passed in but not declared
We can print this attribute to see:
Step 1: clear the previous declaration
Step 2: print the $attrs attribute in the create hook

View print results:

This includes the clearable attribute we passed in
Next, we can use the v-bind instruction to bind the attributes in $attrs to the child components by passing in the object, so that the parent component can easily pass these prop s to the child components without declaration

In this way, the parent component can easily pass these prop s to the child component without declaration

However, it should be noted that Vue will bind the incoming but undeclared prop of the component to the root element of the component as an HTML attribute:

Therefore, we need to deal with this situation with the following properties

Set its value to false to avoid this behavior


$attrs is actually a bridge for transmitting data

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

<div id="app">
    <the-parent :rootData="rootData"></the-parent>

<template id="theParent">
    <the-children v-bind="$attrs"></the-children>
<template id="theChildren">
    <div>Sub component display:{{rootdata}}</div>

<script src="../js/vue.js"></script>
  const app = new Vue({
    el: '#app',
    data: {
      rootData: "Data of root component"
    components: {
      theParent: {
        template: "#theParent",
        // inheritAttrs:false,
        created() {
        components: {
          theChildren: {
            template: "#theChildren",
            props: ['rootdata'],

Operation results:

2, $listeners

Just now, we introduced how to pass prop to the sub component. If we want to pass the event handler function to the sub component

Original practice:
We first bind an event handler function to the sub component

Then trigger the event in the event handler function

To trigger the handler bound to the parent component


New usage:

Similar to the usage of $attrs, when we need to pass the event handler function to the child component, we can use the $listeners attribute on the parent component instance, which contains the event handler function received by the component

Now we bind the clear event handler to the MyInput parent component,
Let's also print the $listeners attribute in the created hook first

This $listeners contains the clear handler we passed in
Remove the original practice

Now we forward this handler function directly to the sub component with the v-on instruction

You can directly receive the processing events of the parent component:

3, $slots

Tags: git github svn

Posted on Mon, 29 Nov 2021 14:06:43 -0500 by Shovinus