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

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>

 VUE3 之 ref、provide、inject 的使用 - 这个系列的教程通俗易懂,适合新手_第1张图片

在 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>
        `
   });

 VUE3 之 ref、provide、inject 的使用 - 这个系列的教程通俗易懂,适合新手_第2张图片

 

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

该例中主组件使用子组件时使用  的写法,给组件添加了 标识名称 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>
        `
   });

这样写就优雅多了,只需要在父组件使用 provide 传参,在需要使用数据的子组件,使用 inject 接收即可

注意:使用 provide 、inject 的方式传参,当父组件的 num 发生改变时,页面不会重新渲染,至于如何重新渲染,在后面的文章中会有介绍。

 

3. 综述

今天聊了一下 VUE3 的 ref、provide、inject 的使用,希望可以对大家的工作有所帮助,下一节我们开始讲 Vue 中 动画 的相关知识,敬请期待

欢迎帮忙点赞、评论、转发、加关注 :)

关注追风人聊Java,这里干货满满,都是实战类技术文章,通俗易懂,轻松上手。

 

4. 个人公众号

追风人聊Java,欢迎大家关注

你可能感兴趣的:(VUE3 之 ref、provide、inject 的使用 - 这个系列的教程通俗易懂,适合新手)