vue3.2 组件之间的数据共享方式（含vuex详解）

2024-07-03 15:50| 来源: 网络整理| 查看: 265

文章目录一、父子组件之间的数据共享 1. 父向子传递数据 2. 子向父传递数据二、兄弟组件的数据共享——EventBus 三、后代关系组件之间的数据共享四、vuex 1. 是什么 2. vuex 工作原理 3. vuex 的使用 4. getters配置项

一、父子组件之间的数据共享 vue3.2 setup 语法糖中：子组件使用 defineProps接收props , 使用 defineEmits传递给参数给父组件 1. 父向子传递数据

父组件通过动态绑定属性（v-bind，简写 :）向子组件传递数据，子组件通过props 接收父组件传递的数据

父组件 import test from '@/views/test.vue' const peroson = { name: 'dudu', age: 16 } 子组件姓名:{ { info.name }} 年龄：{ { info.age }} import { defineProps } from 'vue' defineProps({ info: { type: Object } }) 2. 子向父传递数据

子组件通过自定义事件的方式：$emit('自定义事件名',要传递的数据) 向父组件通信，父组件通过 @自定义方法名=''方法名''使用传递的方法和数据

父组件父组件子组件的年龄：{ { peroson.age }} import test from '@/views/test.vue' import { ref } from 'vue' const peroson

【本文地址】

公司简介

联系我们