Vue3：组件通信、组件生命周期

孤安先生

已于 2023-06-25 10:50:02 修改

阅读量130

点赞数

分类专栏：全栈开发学习日记 # 第九章：Vue3全家桶文章标签： vue.js javascript ecmascript 前端框架前端

于 2023-06-16 08:00:00 首次发布

本文链接：https://blog.csdn.net/qq_41952539/article/details/131236039

版权

全栈开发学习日记同时被 2 个专栏收录

85 篇文章 12 订阅

订阅专栏

第九章：Vue3全家桶

10 篇文章 1 订阅

订阅专栏

文章详细介绍了Vue中父子组件间的通信方式，包括通过props传递数据、使用computed属性监听props变化、通过emit触发父组件方法进行数据回传，以及使用provide和inject进行祖孙组件通信。同时，文章也提到了组件的生命周期，如onMounted、onUpdated和onUnmounted等关键阶段。

摘要由CSDN通过智能技术生成

父子通信

父组件

<template>
	<ChildComp :msg="msg"></ChildComp>
</template>

<script>
import childComp from "./components/ChildComp.vue";
import { ref } from "vue";

export default {
    components: { childComp },
    setup(props) {
        const msg = ref("Hello");
        
        return { msg };
    }
}
</script>

子组件

<template>
	父组件数据改变不会更新：{{ msg }}
	父组件数据改变会更新：{{ childMsg }}
</template>

<script>
import { computed } from "vue";

export default {
	props: ["msg"],
    setup(props) {
        // 当父组件更新 props 时，setup 函数不会重新执行。
        // 所以在 setup 函数中使用 props 时需要使用 computed 或者 watch 来响应 props 的变化。
        // 注意：直接在模板中使用props 数据是没有这个问题的
        const childMsg = computed(() => props.msg);
        
        return { childMsg };
    }
}
</script>

子传父

props 只读，子组件改不了父组件传递过来的值，需要传递给父组件，由父组件进行更改。

子组件

<template>
	{{ childMsg }}
</template>

<script>
export default {
	props: ["msg"],
    setup(props, { emit }) {
        // 父组件传递的值
        const childMsg = computed(() => props.msg);
        
        // 1.修改父组件传递过来的值
        const onChangeMsg = () {
            // 2. 修改后的值传递给父组件
            emit("onChangeMsg", "Hello World");
        };
        
        return { childMsg, onChangeMsg };
    }
}
</script>

父组件

<template>
	<!-- 3.接收子组件修改后的值 -->
	<ChildComp :msg="msg" :onChangeMSg="onChangeMsg"></ChildComp>
</template>

<script>
import childComp from "./components/ChildComp.vue";
import { ref } from "vue";

export default {
    components: { childComp },
    setup(props) {
        const msg = ref("Hello");
        
        // 4.将子组件修改后的值赋值给当前数据
        const onChangeMsg = (data) => {
            msg.value = data;
        };
        
        return { msg, onChangeMsg };
    }
}
</script>

provide 和 inject 组件通信

实现祖孙组件之间的通信。
祖组件通过 provide 提供数据，孙组件通过 inject 对象来接收数据。

# 语法格式
provide(参数, '别名');
inject('别名');

祖组件（传递数据）

let car = reactive({name: '奔驰G63', price: '100W'});
provide(car, 'car')

孙组件（接收数据）

const car = inject('car')

组件生命周期

setup 在组件初次挂载前、重新挂载前都会执行。

生命周期	说明
onMounted	组件挂载完成后执行
onUpdated	组件数据更新后执行
onUnmounted	组件卸载后执行

<script>
import { onMounted, onUnmounted, onUpdated, ref } from 'vue';

export default {
    setup() {
        // 组件挂载完成后执行
        onMounted(() => {
            console.log('组件挂载完成');
        });
        // 组件卸载后执行
        onUnmounted(() => {
            console.log('组件卸载完成');
        });
        
        const count = ref(0);
        // 点击事件：数值增加
        const onClickHandler = () => {
            count.value ++
        };
        // 组件数据更新后执行
        onUpdated(() => {
            cnsole.log('有数据更新')
        });
    }
}
</script>