Vue当中的组件关系

shuye1015
96 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天

  1. 组件之间的关系

在项目开发中,组件之间的最常见的关系分为如下两种:

  • 父子关系
  • 兄弟关系
  1. 父子组件之间的数据共享

父子组件之间的数据共享又分为：

  • 父 -> 子共享数据
  • 子 -> 父共享数据

2-1. 父组件向子组件共享数据

父组件向子组件共享数据需要使用自定义属性。示例代码如下:

2-2. 子组件向父组件共享数据

子组件向父组件共享数据需要使用自定义属性。示例代码如下:

2-3. 兄弟组件之间的数据共享

在 vue2.x中,兄弟组件之间数据共享的方案是 EventBus

2-3-1. EventBus 的使用步骤

  • 创建EventBus.js模块,并向外共享一个Vue 的示例对象
  • 在数据发送方,调用bus.$emit('事件名称',要发送的数据)方法触发自定义事件
  • 在数据接收方,调用bus.$on('事件名称',要发送的数据)方法注册一个自定义事件

2-4. 注意！！！代码实践过程！！！





  1. 什么是 ref 引用

ref 用来辅助开发者在不依赖于jQuery的情况下,获取 DOM 元素或组件的引用。 每个 vue 的组件示例上, 都包含一个 ￥refs对象,里面存储着对应的 DOM 元素或组件的引用。默认情况下,组件的$refs指向一个空对象

<template>
    <div>
        <h3>MyRef 组件</h3>
        <button @click="getRef">获取 $refs 引用</button>
    </div>
</template>

export default{
    methods:{
        // this 是当前组件的实例对象, this.$refs 默认指向空对象
        getRef(){ console.log(this) }
    }
}

3-1. 使用 ref 引用 DOM 元素

如果想要使用 ref 引用页面上的 DOM 元素,则可以按照如下的方式进行操作：

<!-- 使用 ref 属性, 为对应的 DOM 添加引用名称 -->
<h3 ref="myh3">MyRef</h3>
<button @click='getRef'>获取 $refs 引用</button>

methods:{
    getRef(){
        // 通过 this.$refs.引用的名称  可以读取到 DOM 元素或组件的引用
        console.log(this.$refs.myh3)
        // 操作 DOM 元素, 把文本颜色改为红色
        this.$refs.myh3.style.color="red"
    }
}

3-2. 使用 ref 引用组件实例

如果想要使用ref 引用页面上的组件实例,则可以按照如下的方式进行操作

<!-- 使用 ref 属性, 为对应的 '组件' 添加引用名称 -->
<my-counter ref="counterRef"></my-counter>
<button @click='getRef'>获取 $refs 引用</button>

methods:{
    getRef(){
        // 通过 this.$refs.引用的名称  可以引用组件的实例
        console.log(this.$refs.counterRef)
        // 引用到组件的实例之后, 就可以调用组件上的 methods 方法
        this.$refs.counterRef.add()
    }
}

3-3. 控制文本框和按钮的按需切换

通过布尔值inputVisible来控制组件种的文本框与按钮的按需切换。示例代码如下

3-4. 让文本框自动获得焦点

当文本框展示出来之后,如果希望它立即获得焦点,则可以为其添加 ref 引用, 并调用原生 DOM 对象的 .focus()方法即可。示例代码如下

<input type="text" v-if="inputVisible" ref="ipt">
<button v-else @click='showInput'>展示 input 输入框</button>

methods:{
    showInput(){
        this.inputVisible=true
        // 获取文本框的 DOM 引用, 并调用 .focus() 使其自动获得焦点
        this.$refs.ipt.focus()
    }
}

3-5. this.$nextTick(cb) 方法

组件的$nextTick(cb)方法,会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的 DOM 更新完成之后, 再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。

<input type="text" v-if="inputVisible" ref="ipt">
<button v-else @click='showInput' >展示 input 输入框</button>

methods:{
    showInput(){
        this.inputVisible=true
        // 把对 input 文本框的操作, 推迟到下次 DOM 更新之后, 否则页面上根本不存在文本框元素
        await this.$nextTick(()=>{
            this.$refs.ipt.focus()
        })
    },
}
  • 知识点总结：
    1. 能够知道 VUE 中常用的生命周期函数
      • 创建阶段、运行阶段、销毁阶段
      • creatd、mounted
    2. 能够知道如何实现组件之间的数据共享
      • 父 -> 子(自定义属性)
      • 子 -> 父(自定义属性)
      • 兄弟组件(EventBus)
    3. 能够知道如何使用 ref 引用 DOM 元素或组件
      • 给元素或组件添加ref="xxx"的引用名称
      • 通过this.$refs.xxx 获取元素或组件的实例
      • $nextTick()函数的执行时机
  1. 什么是动态组件

动态组件指的是动态切换组件的显示与隐藏

4-1. 如何实现动态组件渲染

Vue 提供了一个内置的组件, 专门用来实现动态组件的渲染。示例代码如下：

data(){
    // 1. 当前要渲染的组件名称
    return{ comName: 'left' }
}

// 2. 通过 is 属性, 动态指定要渲染的组件
<component :is="comName"></component>

// 3. 点击按钮, 动态切换组件的名称
<button @click="comName = 'Left'">展示 Left 组件</button>
<button @click="comName = 'Right'">展示 Right 组件</button>

4-2. 使用 keep-alive 保持状态

默认情况下,切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的组件保持动态组件的状态。示例代码如下：

<keep-alive>
    <component :is="comName"></component>
</keep-alive>

4-3. keep-alive 对应的生命周期函数

当组件被缓存时, 会自动触发组件的deactivated生命周期函数 当组件被激活时, 会自动触发组件的activated生命周期函数

export default{
    creatd(){console.log('组件被创建了')},
    destroyed(){console.log('组件被销毁了')},
}
avatar
文章
阅读
粉丝