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。

相关文章

Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
css中的 vertical-align与line-height作用详解

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》：本文主要介绍了CSS中的`vertical-align`和`line-height`属性，包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，详细内容请阅读本文，希望能对你有所帮助... 目录vertical-ali
阅读更多...
浅析CSS 中z - index属性的作用及在什么情况下会失效

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处
阅读更多...
Python实现html转png的完美方案介绍

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构：try: with sync_playwright(
阅读更多...
Vue 调用摄像头扫描条码功能实现代码

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤：代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js
阅读更多...
CSS @media print 使用详解

CSS @media print 使用详解

《CSS@mediaprint使用详解》：本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例，如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等，还提供了测试方法和关键注意事项，并分享了进阶技巧，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
Spring组件初始化扩展点BeanPostProcessor的作用详解

Spring组件初始化扩展点BeanPostProcessor的作用详解

《Spring组件初始化扩展点BeanPostProcessor的作用详解》本文通过实战案例和常见应用场景详细介绍了BeanPostProcessor的使用,并强调了其在Spring扩展中的重要性,感... 目录一、概述二、BeanPostProcessor的作用三、核心方法解析1、postProcessB
阅读更多...
kotlin中的行为组件及高级用法

kotlin中的行为组件及高级用法

《kotlin中的行为组件及高级用法》Jetpack中的四大行为组件：WorkManager、DataBinding、Coroutines和Lifecycle,分别解决了后台任务调度、数据驱动UI、异... 目录WorkManager工作原理最佳实践Data Binding工作原理进阶技巧Coroutine
阅读更多...
Nginx实现前端灰度发布

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分
阅读更多...
基于Canvas的Html5多时区动态时钟实战代码

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》：本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示，通过Canvas的API，可以绘制出6个不同城市的时钟，并且这些时钟可以动态转动，每个时钟上都会标注出对应的24小时制时间，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2