简单粗暴做开发:Vue2父子组件数据方法传递

前言

vue.js父子组件数据、方法传递及回调、组件交互。


一、传数据

父组件传递属性:

子组件接收:

二、传方法

父组件传递方法:

子组件接收:

三、传绑定方法

父组件传递方法:

子组件接收:

四、挂载的方式传方法(和三的效果相同)

父组件传递方法:

子组件接收:


总结

简单记录Vue2父子组件交互的几个方式。

### 创建和使用全局变量的方法Vue 项目中创建和使用全局变量可以通过多种方式实现。一种常见的方式是在 `main.js` 文件中定义这些变量,使得它们可以在整个应用程序范围内访问。 #### 方法一:通过 Vue 实例属性设置全局变量 当初始化应用实例时,可以利用 Vue 的原型链来挂载自定义属性或方法到所有的 Vue 组件上: ```javascript // main.js import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) // 定义全局变量 app.config.globalProperties.$myGlobalVar = "This is a global variable" app.mount('#app') ``` 这样的好处在于任何地方都可以通过 `this.$myGlobalVar` 来获取这个全局变量[^1]。 #### 方法二:使用 Vuex 状态管理库 对于更复杂的应用程序来说,推荐采用 Vuex 来集中管理和共享状态数据。这不仅限于简单的变量存储,还包括异步操作处理等功能。安装并配置好 Vuex 后,在 store 中定义的状态可以直接作为全局变量被各个模块读取修改。 #### 方法三:借助 Composition API 和 provide/inject 功能 如果不想引入额外依赖项如 Vuex,则可以从父级组件向下传递所需的数据子组件们。这种方法适用于父子关系明确的情况,并且能够保持良好的封装性和灵活性。 ```javascript <script setup> import { ref, provide } from 'vue'; let myGlobalData = ref('Initial Value'); provide('global-data', myGlobalData); </script> <!-- ParentComponent.vue --> <template> <!-- ... --> <ChildComponent /> </template> ``` 而在接收方即子组件内部则可通过 inject 接收该值: ```javascript <script setup> import { inject } from 'vue'; const globalData = inject('global-data'); console.log(globalData); // 输出: Initial Value </script> ``` 这种方式允许更加灵活地控制哪些部分应该拥有特定的上下文信息[^2]。 #### 方法四:直接挂在 window 对象下(不建议) 虽然简单粗暴但是并不提倡的法就是把想要成为全局的东西附加到浏览器窗口对象上去。这样可能会带来命名冲突的风险以及难以维护等问题,因此除非绝对必要否则应避免这么。 综上所述,根据项目的具体需求选择合适的方式来创建和使用全局变量是非常重要的。考虑到可维护性、性能等因素,优先考虑官方支持的最佳实践方案会是比较明智的选择。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值