主页

组件运行过程


组件的生命周期指的是:组件从创建 -> 运行(渲染)-> 销毁的整个过程,强调的是一个时间段



文章卡片
Vue2-生命周期&数据共享

2022-09-21 09:28:03

父子组件之间的数据共享

1. 父 -> 子共享数据

通过自定义属性共享数据

2. 子 -> 父共享数据

通过自定义事件共享数据

// 子组件
export default {
    // 1. 声明自定义事件
    emits: ['n1change'],
    data() {
        return {
            n1: 0
        }
    },
    methods: {
        addN1() {
            this.n1++
            // 2. 数据变化时,触发自定义的事件
            this.$emit('n1change', this.n1)
        }
    }
}
// 父组件
// 1. 监听子组件的自定义事件 n1change
<my-count @n1change="getn1"></my-count>

export default {
    data() {
        return {
            n1FromSon: 0
        }
    },
    methods: {
        // 2. 通过形参,接收子组件传递过来的数据
        getn1(n1) {
            this.n1FromSon = n1
        }
    }
}

3. 父 <-> 子双向数据同步

父组件在使用子组件期间,可以使用 v-model 指令维护组件内外数据的双向同步:

4. 兄弟之间数据共享

兄弟之间实现数据共享的方案是 EventBus。可以借助第三方包 mitt 来创建 eventBus 对象,从而实现兄弟组件之间的数据共享:

安装 mitt 依赖包

npm i mitt@2.1.0

创建公共的 EventBus 模块

在项目中创建公共的 evenBus 模块:

// evenBus.js

// 导入 mitt 包
import mitt from 'mitt'
// 创建 EventBus 的实例对象
const bus = mitt()

// 将 EventBus 的实例对象共享出去
export default bus

在数据接收方自定义事件

在数据接收方,调用 bus.on('事件名称', 事件处理函数) 方法注册一个自定义事件:

// 导入 evenBus.js 模块,得到共享的 bus 对象
import bus from './evenBus.js'

export default {
    data() {
        return {
            count: 0
        }
    },
    creted() {
        // 调用 bus.on() 方法注册一个自定义事件,通过事件处理函数的形参接收数据
        bus.on('countChange', (count) => {
            this.count = count
        })
    }
}

在数据发送方触发事件

在数据发送方,调用 bus.emit('事件名称', 要发送的数据) 方法触发自定义事件:

// 导入 evenBus.js 模块,得到共享的 bus 对象
import bus from './evenBus.js'

export default {
    data() {
        return {
            count: 0
        }
    },
    methods: {
        addCount() {
            this.count++
            // 调用 bus.emit() 方法触发自定义事件,并发送数据
            bus.emit('countChange', this.count)
        } 
    }
}

后代关系组件的数据共享

后代关系组件之间数据共享,指的是父节点的组件向其子孙组件共享数据,可以使用 provideinject 实现后代关系组件之间的数据共享

父节点通过 provide 共享数据

父节点的组件可以通过 provide 方法,对其子孙节点共享数据:

export default {
    data() {
        return {
            // 1. 定义 “父组件” 要向 “子组件” 共享的数据
            color: 'red'
        }
    },
    // 2. provide 函数 return 的对象中,包含了 “要向子孙组件共享的数据”
    provide() {
        return {
            color: this.color
        }
    }
}

子孙节点通过 inject 接收数据

子孙节点的组件可以使用 inject 数组,接收父级节点向下共享的数据:

<template>
    <h5>子孙组件 --- {{ color }}</h5>
</template>

<script>
export default {
    // 子孙组件,使用 inject 接收父节点向下共享的 color 数据,并在页面上使用
    inject: ['color']
}
</script>

父节点对外共享响应式的数据

父节点使用 provide 向下共享数据时,可以结合 computed 函数向下共享响应式数据:

// 1. 从 vue 中按需导入 computed 函数
import { computed } from 'vue'

export default {
    data() {
        return {
            color: 'red'
        }
    },
    provide() {
        return {
            // 2. 使用 computed 函数,可以把要共享的数据 “包装为” 响应式的数据
            color: computed(() => this.color)
        }
    }
}

子孙节点使用响应式的数据

如果父级节点共享的是响应式数据,则子孙节点必须以 .value 的形式进行使用:

<template>
    <!-- 响应式的数据,必须以 .value 的形式进行使用 -->
    <h5>子孙组件 --- {{ color.value }}</h5>
</template>

<script>
export default {
    // 接收父节点向下共享的 color 数据,并在页面上使用
    inject: ['color']
}
</script>

Vue3

版权属于:Joe
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
1

目录

来自 《Vue3-生命周期&数据共享》
评论

qiaofugui

博主很懒,啥都没有
188 文章数
14 评论量
3 分类数
191 页面数
已在风雨中度过 2年133天2小时42分