VUE3 之 ref、provide、inject 的使用 - 这个系列的教程通俗易懂，适合新手 - JavaScript

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1. 概述

首因效应告诉我们：

在日常交往中，第一印象是非常重要的，好的第一印象能让我们在与人相处时事半功倍。

但也从另一面告诉我们，不能仅凭第一印象去判断一个人，有时虚假的第一印象，也有可能蒙蔽我们的双眼，影响我们的判断，正所谓“路遥知马力，日久见人心”。

言归正传，今天我们来聊聊 VUE 中 ref、provide、inject 的使用。

2. ref、provide、inject

2.1 使用 ref 获取 dom 元素

<body>

    <div id="myDiv"></div>

</body>

<script>

   const app = Vue.createApp({

        mounted() {

            console.info(this.$refs.div1)

            this.$refs.div1.innerHTML = 'hello';

        },

        template:`

            <div>

                <div ref="div1">

                </div>

            </div>

        `

   });

   const vm = app.mount("#myDiv");

</script>

在 VUE 中，获取 dom 元素就是这么简单，在想获取的 dom 元素上增加属性 ref="标识名称"，然后在方法中使用 this.$refs.标识名称，即可获取该 dom 元素

注意：使用 this.$ref.标识名称获取 dom 元素时，必须是在 dom 元素渲染完成后，也就是说，必须是在 mounted 周期方法中获取或是元素渲染完成后，使用触发方法获取

2.2 使用 ref 获取子组件

    const app = Vue.createApp({

        mounted() {

            this.$refs.myCom.method1();

        },

        template:`

            <div>

                <my-com ref="myCom" />

            </div>

        `

    });

    app.component("my-com", {

        methods : {

            method1 () {

                alert("hello");

            }

        },

        template: `

            <div>

                component1

            </div>

        `

   });

ref 的另一个功能，就是获取子组件对象

该例中主组件使用子组件时使用 <my-com ref="myCom" /> 的写法，给组件添加了标识名称 myCom，

然后在方法中使用 this.$refs.myCom.method1(); 得到子组件对象，并调用了子组件中的方法。

2.3 多组件参数传递

如果有一个参数，需要从父组件传递到子组件，然后子组件再传递给子子组件，根据我们之前学的知识，可以这么写

    const app = Vue.createApp({

        data(){

            return {

                num : 1

            }

        },

        template:`

            <div>

                <my-com-1 :num="num" />

            </div>

        `

    });

    app.component("my-com-1", {

        props:["num"],

        template: `

            <my-com-2 :num="num" />

        `

   });

   app.component("my-com-2", {

        props:["num"],

        template: `

            <div>

                {{num}}

            </div>

        `

   });

这样写的确可以实现，但似乎不太优雅，所有的子组件都需要接收参数，并再往下传递，这里有一个更好的写法

2.4 多组件参数传递优化

   const app = Vue.createApp({

        data(){

            return {

                num : 1

            }

        },

        provide() {

            return {

                num_2 : this.num

            }

        },

        template:`

            <div>

                <my-com-1 />

            </div>

        `

    });

    app.component("my-com-1", {

        template: `

            <my-com-2 />

        `

   });

   app.component("my-com-2", {

        inject:["num_2"],

        template: `

            <div>

                {{num_2}}

            </div>

        `

   });