36°

vue学习--组件之间的传值方式

1、概述

vue由多个组件构成页面,在不同的组件中有不同的联系,组件之间的传值是十分有必要的

2、父子组件之间传值 --props和$emit

父传子:通过props

方法:子组件:props:['msg'] 父组件:<Child :msg="message" @changeData="getChildData"></Child>

子传父:通过$emit事件触发

方法:子组件:this .$emit('changeData',this.childMsg) 父组件:<Child :msg="message" @changeData="getChildData"></Child>

3、非父子组件之间的传值 -- 中间组件方式

方法:创建一个第三方组件--bus,用bus组件进行事件的触发与监听,相当于一个中间件一样。
实例代码:

Bus.js: import Vue from 'vue'; const Bus = new Vue(); export default Bus;

触发:bus.$emit('busEvent',this.childMsg) 监听:Bus.$on('busEvent',(res)=>{ console.log('bus监听到了'); console.log(res); })

4、各种组件之间传值 -- vuex存储

vuex类似一个仓库,存放的数据在vue中任何地方可以引用
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({ state: { //this.$store.state.count调用 count: 233 }, getters: { getCount(state) { //this.$store.getters.getCount调用 return state.count; } }, mutations: { //同步修改 addCount(state) { // state.count++ }, reduceCount(state) { //this.$store.commit('reduceCount')调用 state.count-- } }, actions: { //异步修改 addCountAsync(context) { //this.$store.dispatch('addCountAsync')调用陪你过 setTimeout(() => { context.commit('addCount') }, 1000) } }, modules: {

}

})

本文转载自博客园,原文链接:https://www.cnblogs.com/Zxq-zn/p/12200691.html

全部评论: 0

    我有话说: