Method of use

Declare the provide property, which can be an object or a return object, in the parent component that is passed to the children and descendants

provide () {
        return {
            father_string: this.father_string
        }
}
Copy the code

advantages

This method is not limited to parent and child components and can be passed across generations.

disadvantages

The supplied properties are non-reactive. Data tracing is difficult and can couple components in an application to their current organization, making refactoring more difficult.

Instance of a

The parent component passes down the father_string argument, the representation of the descendant component

The parent component

<! -- Parent component --><template>
    <div class="family">
        <div>
            <div>father_string:{{father_string}}</div>
            <p>Change the father_string of the parent component</p>
            <input v-model="father_string">
        </div>
        <! -- Subcomponent -->
        <Son></Son>
        <! -- Subcomponent -->
    </div>
</template>

<script>
import Son from "./Son";
export default {
    name: "HelloWorld",
    data () {
        return {
            father_string: "father"}; },components: {
        Son,
    },
    provide () {
        return {
            father_string: this.father_string
        }
    }

};
</script>

<style scoped>
.family {
    width: 40%;
    margin: 0 30%;
    display: flex;
    justify-content: space-around;
}
</style>
Copy the code

Child components

<! -- Subcomponent --><template>
    <div>
        <div>Father_string received by the child component</div>
        <div>{{father_string}}</div>
    </div>
    <! -->
    <Grandson></Grandson>
    <! -->

</template>

<script>
import Grandson from "./Grandson";
export default {
    name: "Son".inject: ["father_string"].components: {
        Grandson,
    }
};
</script>
Copy the code

Sun components

<! --><template>
    <div>
        <div>Father_string :{{father_string}}</div>
        <div>{{father_string}}</div>
    </div>
</template>

<script>
export default {
    name: "Grandson".inject: ["father_string"]};</script>
Copy the code

Example 1 Effect

When initially rendered, both child and descendant components receive arguments as father

When the parameters of the parent component are changed, the non-responsive parameters of the child and descendant components are shown as non-responsive

summary

Descendant components can easily access the parent’s data across hierarchies, but when the data changes, descendant components are not responsive and do not update in real time

Example 2

The parent component passes down son_string, and the child component passes down SON_string

Add the son_string parameter in the parent component

The parent component

<! -- Parent component --><template>
    <div class="family">
        <div>
            <div>father_string:{{father_string}}</div>
            <p>Change the father_string of the parent component</p>
            <input v-model="father_string">
            <div>Father son_string: {{son_string}}</div>
        </div>
        <! -- Subcomponent -->
        <Son></Son>
        <! -- Subcomponent -->
    </div>
</template>

<script>
import Son from "./Son";
export default {
    name: "HelloWorld",
    data () {
        return {
            father_string: "father".son_string: "son_string_but from father"
        };
    },
    components: {
        Son,
    },
    provide () {
        return {
            father_string: this.father_string,
            // Here we add son_string passing down
            son_string: this.son_string
            // Here we add son_string passing down}}};</script>
<style scoped>
.family {
    width: 40%;
    margin: 0 30%;
    display: flex;
    justify-content: space-around;
}
</style>
Copy the code

Child components

We are also providing the new parameter SON_string in the child component

<! -- Subcomponent --><template>
    <div>
        <div>Father_string received by the child component</div>
        <div>father_string:{{father_string}}</div>
        <div>Subcomponent son_string:{{son_string}}</div>
    </div>
    <! -->
    <Grandson></Grandson>
    <! -->

</template>

<script>
import Grandson from "./Grandson";
export default {
    name: "Son",
    inject: ["father_string"],
    provide () {
        return {
            son_string: this.son_string
        }
    },
    data () {
        return {
            son_string: "son_string: "son_string_but from son"
        }
    },
    components: {
        Grandson,
    }
};
</script>

Copy the code

Finally, the son_string parameter is received in the grandson component

<! --><template>
    <div>
        <div>Father_string :{{father_string}}</div>
        <div>{{son_string}}</div>
    </div>
</template>

<script>
export default {
    name: "Grandson".inject: ["father_string"."son_string"]};</script>
Copy the code

Example 2 Effect

conclusion

From the figure, we can see that the grandson component displays the son_string_but from son parameter from the child component, not from the parent component. This method injects parameters from the top down. Descendant components do not know who passed the parameter, but take the parameter passed by the nearest parent component first, and they are non-responsive.