vue createApp创建实例并进行父子传参

vue3写法

import myComponent from './components/my-component';
const vueComInstance = Vue.createApp(myComponent, {myProps: value})
vueComInstance.mount('#idName');

vue2写法

import myComponent from './components/my-component';
const vueComInstance = new Vue(myComponent);
vueComInstance.myProps = value;
vueComInstance.$mount('#idName');

### Vue3 中不通过路由实现页面间参数传递 在某些场景下,可能希望在不同组件或页面之间共享数据而不依赖于 `vue-router` 的 URL 参数机制。以下是几种常见的方法: #### 1. 使用 Vuex 进行状态管理 Vuex 是专门为 Vue 应用程序设计的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态。 ```javascript // store/index.js import { createStore } from 'vuex' export default createStore({ state: { sharedData: null, }, mutations: { setSharedData(state, data) { state.sharedData = data; } }, actions: { updateSharedData({ commit }, data) { commit('setSharedData', data); } } }) ``` 当需要设置共享的数据时,在发送方组件中调用 action 更新全局状态: ```javascript this.$store.dispatch('updateSharedData', someData); ``` 而在接收方组件内可以直接访问该数据: ```javascript computed: { ...mapState(['sharedData']) } ``` 这种方法适合处理复杂的应用逻辑以及跨多层嵌套子组件间的通信[^1]。 #### 2. 利用 Provide / Inject API 对于父子关系明确的情况,可以考虑使用 provide 和 inject 来完成简单的上下文感知型注入操作。 父级组件提供数据: ```javascript <template> <child-component /> </template> <script setup> provide('message', reactive({ text: 'Hello!' })) </script> ``` 子级组件接受数据: ```javascript <script setup> const message = inject('message') console.log(message.text) </script> ``` 此方式适用于较浅层次的父子组件之间的通讯需求[^2]。 #### 3. Event Bus (事件总线) 创建一个新的实例作为消息中心,用于广播自定义事件给其他监听者。 初始化 event bus: ```javascript // main.js 或单独文件 import { createApp } from 'vue' const app = createApp(App); app.config.globalProperties.eventBus = new EventEmitter(); ``` 发布事件: ```javascript this.$eventBus.emit('data-passed', payload); ``` 订阅事件: ```javascript mounted() { this.$eventBus.on('data-passed', (payload) => { console.log(payload); }); }, beforeUnmount() { this.$eventBus.off('data-passed'); } ``` 需要注意的是,随着项目规模增大,这种方式可能会变得难以维护,因此建议仅限小型应用程序或特定功能模块内部使用[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值