Several methods of Vue component parameter transfer

1, props parameters
There are three ways to define props for subcomponents:

/ First array mode
props: [xxx, xxx, xxx]
// Second object mode
props: { xxx: Number, xxx: String}
// The third way of nesting objects
props: {
    xxx: {
        //Warning for type mismatch
        type: Number,
        default: 0,
        required: true,
        // Return value is not true, warning
        validator(val) { return val === 10}
    }
}

The third type of object supports four attributes by default, and all of them are not required. Free to use
There are two ways to pass parameters from the parent component:
The first static attribute parameter
Be careful:
When the props type is not defined, all the props received are strings.
When the props attribute is specified as Boolean, and only when the attribute key has no value value value, the value accepted is true

<! -- props receives string -- >
<children xxx="123"></children>

<! -- there are only attributes but no values. In this case, props will receive true if the specified type is Boolean -- >
<children xxx></children>

The second dynamic attribute parameter transfer
Be careful:
It is necessary to distinguish that if the value passed in by non shorthand form is an object, it will correspond to multiple values in props
The type of the incoming value is preserved
If it is an expression, it gets the evaluation result of the expression

<! -- prop received 123 of Number type -- >
<children :xxx="123"></children>

<! -- prop received [1, 2, 3] -- >
<children v-bind:xxx="[1, 2, 3]"></children>

<! -- prop will receive two parameters, xxx1 and xxx2. This does not support shorthand -- >
<children v-bind="{xxx1: 1, xxx2: 2}"></children>

2, attrs and listeners
$attrs
$attrs will get the attributes (except class and style attributes) that are not defined in props, which supports responsive. There are two common scenes:

Components can use $attrs to support too much property support when nesting components. For example, table component of elementUI. There are more than ten supported attributes, and the most commonly used attributes are one or two.
Attributes are added to the parent component by default. Sometimes you want to add extra attributes to the child component (you can combine inheritAttrs: false attribute to make the parent property not accept extra attributes)

$listeners
The defined events are all on the root element of the subcomponent, and sometimes they want to be added to other elements. You can use $listers. It contains event listeners in the parent component (except for those with the. native modifier)

3, $emit notification
By default, Vue has several methods of $on $exit $once $off to implement the publish / subscribe mode, which is also applied to component parameters. The special method @ abc = "methods" added to the component is equivalent to using $on to listen to this method. So $emit can be used within the component to notify.
Here's a question: how to get the values of subcomponents and loops in for
There are two answers, one is $event, the other is closure. Just note that $event can only get the first value

<template v-for="item in [1, 2, 3]">
    <children @abc="((val, val2) => getValue(val, item))"></children>
</template>

4, v-model
This is actually a combination of emit and on. The advantages are convenient synchronization and elegant writing. The following three ways of writing actually mean the same thing

// Writing 1
<children v-model="a"></children>
{
    model: {
        prop: 'value',
        event: 'update:a',
    },
    methods: {
        a() { this.$emit('update:a', 1)}
    }
}

// Writing 2
<children :a="a" @update:a="a = $event"></children>
{
    props: ['a']
    methods: {
        a() { this.$emit('update:a', 1)}
    }
}
// Writing 3 
// 1. Event name must be update: + property name
// 2. The parameter cannot be an expression, preferably an attribute in data
<children :a.sync="a"></children>
{
    props: ['a']
    methods: {
        a() { this.$emit('update:a', 1)}
    }
}

Five, slot

<template>
    <div>
        <!--Default slot-->
        <slot></slot>
        <!--Another way to write the default slot-->
        <slot name="default"></slot>
        <!--Named slot-->
        <slot name="footer"></slot>
        <!--Reference slot-->
        <slot v-bind:user="user" name="header"></slot>
    </div>
</template>

<!--Use-->
<children>
    <!--Go to the default slot-->
    <div>123</div>
    <!--Another way to write the default slot-->
    <template v-slot:default></template>
    <!--Run to the named slot footer Go in-->
    <template v-slot:footer></template>
    <!--Abbreviation form-->
    <template #footer></template>
    <!--Get the value of the subcomponent-->
    <template v-slot:header="slot">{{slot.user}}</template>
    <!--Fabric slot value-->
    <template v-slot:header="{user: person}">{{person}}</template>
    <!--The old style can be written on specific labels-->
    <template slot="footer" slot-scope="scope"></template>
</children>

6, $refs, $root, $parent, $children
$root get root component
$parent get parent component
$children get subcomponents (all subcomponents, order not guaranteed)
$refs component gets component instance, element gets element

7, project / inject
Note: the injected value is not responsive

<!--Parent component provides-->
{
    project() {
        return {
            parent: this
        }
    }
}
<!--Subcomponent injection-->
{
    // Write a way
    inject: ['parent']
    // Writing two
    inject: { parent: 'parent' }
    // Writing three
    inject: {
        parent: {
            from: 'parent',
            default: 222
        }
    }
}

Published 93 original articles, won praise 7, visited 1905
Private letter follow

Tags: Attribute Vue

Posted on Sat, 07 Mar 2020 23:45:17 -0500 by kungfu71186