vue2 组件通信

2024-09-09 06:28
文章标签 javascript 组件 vue 通信 vue2 frontend

本文主要是介绍vue2 组件通信，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

props + emits

  • props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’
  • emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新)

props检查属性

属性名类型描述默认值
typeFunction指定 prop 应该是什么类型，如 String, Number, Boolean, Object, Array, Function, 或它们的构造函数。无
defaultany / Function指定 prop 的默认值。可以是一个值，也可以是一个返回值的函数。无
requiredBoolean指定 prop 是否必须传递。false
validatorFunction一个验证函数，用于更复杂的验证逻辑。函数应该返回一个布尔值，表示验证是否通过。无

说明

  • type: 确保 prop 符合预期的数据类型，有助于在开发过程中捕获错误。
  • default: 当父组件没有传递相应的 prop 时，提供一个回退值，确保组件即使在没有接收到外部数据的情况下也能正常运行。
  • required: 标记为 true 时，如果父组件没有提供该 prop，Vue 会在控制台中显示警告，这有助于避免因缺少必要数据而导致的错误。
  • validator: 提供了一个更灵活的验证机制，允许开发者定义复杂的验证逻辑，确保 prop 符合特定的条件或规则。

示例

父
<template><div><!-- 使用对象语法统一传递多个 props <child-component v-bind="propsData"></child-component>--><child-component :size.sync="size":height="height" @my_event ="height = height + $event"></child-component>//:size.sync = :size="size" +  @update:size="size = $event"//vue3 废弃</div>
</template><script>
// 导入子组件
import ChildComponent from './ChildComponent.vue'; // 确保文件路径正确export default {data() {return {propsData: {size: 10,myMessage: "test",height: 50,age: 10}};},components: {ChildComponent // 注册子组件}
};
</script>
子–Children
<script>
export default {// props: ['size', 'myMessage'], //简易声明props: {size: Number,// 类型检查height: Number,// 类型检查 + 其他验证age: {type: Number, // 指定 prop 类型为 Numberdefault: 0,   // 如果没有提供 age，将使用默认值 0required: true, // 指定 age 必须传递validator: value => {return value > 0; // 验证 age 必须大于 0}}  },methods:{ChangeElements(){this.$emit('update:size',v);//:size.sync="size"this.$emit('my_event',v);//:height="height" @my_event ="height = height + $event"}}
}
</script>

.sync

  • 一个语法糖
  • :value.sync=‘value’ <==> :value=“calue” @update:value=“value = $event”

说明：

  1. 父组件模板：使用 v-bind 指令（或简写为 :）和对象语法来统一传递 propsData 对象中的所有属性作为 props。v-bind="propsData" 会将 propsData 对象中的所有属性作为独立的 props 传递给子组件。
  2. 父组件数据：在 data 返回的对象中定义了一个 propsData 对象，包含了所有要传递给子组件的属性。
  3. 子组件 props：子组件定义了 size、myMessage、height 和 age 四个 props，这些 props 用于接收从父组件传递的数据。

--------非父子通信-------

provide + inject

  • 跨层级共享数据

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

父
  • 普通类型非响应式
  • 复杂类型响应式
  • 引用传递
<script>
export default{provide(){return{//普通类型[非响应式]age:120,//复杂类型[响应式]a:{b:2,c:3}}  }
}</script>
后代
<script>
export default{inject:['age','a'],created(){console.log(this.age,this.a);this.age = 20; //报错不可更改this.a.b = 110;//界面会响应,父类的age同步更改}
}
</script>

event bus

  • 事件总线, 在非父子组件之间通信

事件总线

//创建一个都可以访问到的事件总线(空的 Vue实例)
import Vue from 'vue'
const Bus = new Vue();
export default Bus

A组件

<script>
import Bus from 'bus地址'
export default{created(){Bus.$on('AMsg',(msg)=>{console.log(msg)}) }
}
</script>

B组件

<script>
import Bus from 'bus地址'
export default{methods:{sendAMsg(){Bus.$emit('AMsg',"你的消息")  }}
}
</script>

Vuex

  • 是什么

    • 复杂场景组件之间通信

    • vuex是vue的一个状态管理工具,状态就是数据

    • 大白话: vuex是一个插件,可以帮助我们管理 vue通用数据(多组件数据共享)

  • 场景

    • 某个状态在多个组件使用(个人信息)
    • 多个组件 共同维护 一份数据(购物车)

  • 优势

    • 数据集中化管理
    • 响应式

  • vuex遵循单向数据流

初始配置

  1. 安装 vuex

    • npm install vuex@next --save # 对于 Vue 3
    • npm install vuex --save # 对于 Vue2

  2. 新建vue模块

    • 新建store/index.js文件 专门存放 Vuex

  3. 创建仓库

    // store/index.js
// 导入 Vuex，它是 Vuex 状态管理库的核心
import Vuex from 'vuex';// 创建一个新的 Vuex.Store 实例
// 这个实例将作为全局状态管理器
export default new Vuex.Store({// 定义应用的状态（state）state: {// 一个名为 count 的状态，初始值为 0count: 0},// 定义更改状态的方法（mutations）mutations: {// increment 方法用于更新 count 状态// state 是 Vuex state 对象，v 是传递给 mutation 的参数increment(state, v) {// 将 count 状态更新为传入的参数 vstate.count = v;}},// 定义异步提交状态更改的方法（actions）actions: {// increment 方法用于异步提交 increment mutationincrement({ commit }) {// 调用之前定义的 increment mutationcommit('increment',10);}},// 定义从状态派生的状态（getters）getters: {// doubleCount 方法返回 count 的两倍// state 是 Vuex state 对象doubleCount(state) {// 返回 count 状态的两倍return state.count * 2;}}
});

  4. 挂载main.js

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store/index';// 使用 Vuex 插件
Vue.use(Vuex);new Vue({store,render: h => h(App)
}).$mount('#app');

配置项

  • new Vuex.Store({配置项})
配置项类型描述
stateObject根状态对象，包含所有的状态数据
gettersObject根getter函数，允许从state派生出一些状态
mutationsObject同步函数，用于变更state中的状态数据在 ;Vue 3 中，mutations 应改为 actions 和 commit，因为 Vue 3 的 Vuex 4 中不再使用 mutations。
actionsObject异步操作或复杂逻辑的提交（调用mutation）的包裹函数
modulesObject命名空间模块对象，用于将store分割成模块
pluginsArray自定义插件数组，用于进一步处理 actions
strictBoolean是否开启严格模式，开启后在mutation之外修改state将抛出错误
devtoolsBoolean / Object是否启用 Vue Devtools 支持，可以传递选项对象
state

  • 根状态对象，包含所有的状态数据

  • 核心配置项(必要的)

  • 获取数据

    • 通过this.$store.属性名
    • 通过 import 导入 store 然后使用
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex); // 使用 Vuex 插件const store = new Vuex.Store({state: {count: 1},
});
getters
  • 根getter函数，允许从state派生出一些状态
  • 对数据进一步,派生状态
  • 使用
    • $store.getters.filterList()
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex); // 使用 Vuex 插件const store = new Vuex.Store({state: {list: [1,2,3,4,5,6,7,8,9]},getters:{//过滤 <= 5 的数据filterList(state){return state.list.filter(item=> item > 5)}}
});
mutations/actions

  • 用于变更state中的状态数据

  • actions:异步操作或复杂逻辑的提交（调用mutation）的包裹函数

  • Mutations：通常使用全小写字母，并且可以使用下划线来分隔单词，例如 update_count。

    • 第一个参数是state也就是状态 ,通过state 来调用数据

  • Actions：可以使用驼峰命名法，并且通常在名称中包含动词，以表明它们执行的操作，例如 updateCount。

    • 第一个参数是context 是上下文,和 state相似
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex); // 使用 Vuex 插件const store = new Vuex.Store({state: {count: 10},actions: {async updateCount({ commit }, n) {commit('update_count', n);},async updateCount2(context, n) {context.commit('update_count', n);}},mutations: {//可以同名,但是不推荐update_count(state, n) {state.count = n;}}
});export default store;
modules

分模块

  • Vue 使用单一状态树,当项目比较大时,状态会集中,从而导致项目臃肿
  • 将vuex配置文件导入 根配置下的 modules 就可以了
导入模块
// store/modules/user.js
const state = { ... };
const mutations = { ... };
const actions = { ... };
const getters = { ... };export default {state,mutations,actions,getters
};
// store/index.js 根模块
import Vuex from 'vuex';
import user from './modules/user'; 
const store = new Vuex.Store({modules: {user}
});
export default store;
使用

  • 子模块state

    • $store.state.模块名.属性名
    • mapState映射:
      mapState('模块名',['属性名']);
      this.属性名 就可以访问数据了

  • 子模块getters

    • $store.getters['模块名/属性名称']
    • mapGetters映射:
      mapGeters(‘模块名’,[‘属性名’,‘属性2’])
      this.属性名 就可以获得数据
    • 模块名/属性名称:是因为命名是时候就是这命名的

  • 子模块mutations

    • $store.commit['模块名/属性名称']
    • mapMutations映射:
      mapMutations(‘模块名’,[‘函数名’,‘函数2’])
      this.函数名() 就可以调用函数了
    • 模块名/属性名称:是因为命名是时候就是这命名的

  • 子模块actions

    • $store.dispatch['模块名/属性名称']

    • mapActions映射:
      mapActions(‘模块名’,[‘函数名’,‘函数名2’])

      this.函数名() 就可以调用函数了

    • 模块名/属性名称:是因为命名是时候就是这命名的

数据的更改

  • this.$emit() 是 Vue 组件中用来触发自定义事件的方法。当调用 this.$emit('eventName', param) 时，它会向父组件发出一个事件，父组件可以监听这个事件并做出响应。
  • 同步:
    • 而在 Vuex 中，this.$store.commit('mutationName', param) 用于触发状态变更。这里的 commit 方法用于调用 store 中定义的 mutations，mutations 是同步函数，用于更改 store 中的状态（state）。
  • 异步:
    • this.$store.dispatch('actionName', payload) 来分发 actions。这会告诉 Vuex 执行相应的 action 函数。

辅助函数

mapState
  • 将store中的数据,自动映射到 组件的 计算属性中
  • 可以直接this.属性名 来访问数据
//引入mapState
import { mapState } from 'vuex';//使用
export default {computed: {// 使用对象展开运算符将所有映射的状态转为计算属性...mapState([// 映射 this.count 为 store.state.count'count']),// 映射 this.doubleCount 为 store.getters.doubleCount...mapState({'doubleCount': state => state.count * 2})}
}
//-------------------
computed:{ ...mapState['状态名'] }
//# 等价
computed:{ '状态名'(){return this.$store.state.count
}}
mapMutatuons
  • 将mutations同步函数 中的方法,映射到 methods中
  • 可以直接this.函数名(n) 来调用函数
//引入 mapMutatuons
import {mapMutatuons} from 'vuex'
//使用
export default {methods: {...mapMutations(['update_count' // 直接使用 mutation 名称]),...mapMutations({'set_count': 'update_count' // 为 mutation 提供一个别名}),increment() {this.update_count(1); // 调用 Vuex store 的 mutation},decrement() {this.set_count(-1); // 使用别名调用 mutation}}
}
//---------------------------------
methods:{...mapMutations(['方法名'])  
}//等价
methods:{'方法名'(参数){this.$store.commit('方法名',参数)}
}
mapActions
  • 将actions异步操作中的方法,映射到 methods中
  • 可以直接this.函数名(n) 来调用函数
//导入mapActions
import { mapActions } from 'vuex';//使用
export default {methods: {...mapActions(['UpdateCount' // 将 `this.update_count` 映射为 `this.$store.update_count('actionName',obj)`]),...mapActions({'mappedActionName': 'UpdateCount' // 将 `this.mappedActionName` 映射为 `this.$store.dispatch('update_count')`}),}
}
//--------------------
methods:{..,mapActions([方法名])
}
# 等价
methods:{'方法名'(参数){this.$store.dispatch('方法名',参数)}
}
mapGetters
  • 将getters中的函数 中的方法,映射到 computed中
  • 可以直接this.函数名(n) 来调用函数
示例
<template></template>
<script>
import {mapState,mapMutations,MapActions,MapGetters} form 'vuex'
export default{name:'test',computed:{...mapState(['count']),...maoGetters(['filterList'])},methods:{...mapMutations('updata_count'),...MapActions('UpdataCount')}
}
</script>

$refs获取dom

  • ref和$refs
  • 获取dom元素 或 组件实例
    • ref和$refs=> 当前组件内 (更精确)
    • document => 当前页 (范围广)
  • 和 id 的用法相似
<template><div ref="MyDom" id="MyDom"></div><TestEl ref="MyEl"></TestEl></template><script>
export default{mounted(){// dom元素this.$ref.MyDom//等价document.getElementById('myDom')//组件实例let vm = this.$ref.MyElvm.get_methods();//可以调用TestEl里面的数据},components:{TestEl}}</script>

$nextTick异步跟新

  • Vue采用的是异步跟新
<template><div><div v-if="isShow" ref="_1"> ...  </div><div v-else ref="_2"> ...  </div></div>
</template><script>export default{data(){return {isShow:true}},methods:{change(){this.isShow = false;this.$ref._2.focus();//警告this.$ref._2为 undefined//因为采用的是异步跟新,所以当前还没有跟新 _2这个元素this.$nextTick(()=>{ //当异步跟新完成后的回调this.$ref._2.focus();})//可以的}}}
</script>

这篇关于vue2 组件通信的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1150414。

相关文章

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...
SpringQuartz定时任务核心组件JobDetail与Trigger配置

SpringQuartz定时任务核心组件JobDetail与Trigger配置

《SpringQuartz定时任务核心组件JobDetail与Trigger配置》Spring框架与Quartz调度器的集成提供了强大而灵活的定时任务解决方案,本文主要介绍了SpringQuartz定... 目录引言一、Spring Quartz基础架构1.1 核心组件概述1.2 Spring集成优势二、J
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...
CSS will-change 属性示例详解

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSSwill-change属性详解，感... will-change 是一个 css 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化
阅读更多...
CSS去除a标签的下划线的几种方法

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧... 在 css 中，去除a标签（超链接）的下划线主要有以下几种方法：使用text-decoration属性通用选择器设置：使用a标签选择器，将tex
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2