Vue组件传值

Vue组件传值

这篇总结主要介绍Vue组件传值

1.父传子 Props

语法：

/*(1)传：父传
	<子组件 :属性名="属性值" ></子组件>
(2)收：子收
props : {  属性名: 数据类型 }*/

单向数据流
概念： 父组件传递给子组件的数据，子组件只能使用，不能修改
原理： 值类型赋值的时候拷贝的是数据，如果修改拷贝后的数据，对原数据没有影响，就会导致组件数据不统一。 如果是引用类型，由于拷贝的是地址，修改拷贝后的数据会影响原数据。

2.子传父 自定义事件配合$emit

1.语法

/*1.传: 子传
	this.$emit( '自定义事件名' , 事件对象 )
2.收： 父收
	<子组件 @自定义事件="事件方法"></子组件>*/

3.Vuex

是什么？一种用于状态管理的官方库

场景：1.非父子关系组件传值，2.数据在多个组件中使用

vuex特点
a. 响应式 ： vuex数据变化了，视图会自动更新
b. 所有组件共享数据

vuex语法

state
作用：负责存储数据
语法:

// vuex中
state : { 属性名:属性值 }

// 组件中
this.$store.state.属性名

getters
作用： 相当于state计算属性
语法：

// vuex中
getters : {
    属性名(state){
       return 属性值
   } 
}
//组件中
this.$store.getters.属性名

mutations
作用：修改state数据，mutations是修改state数据的唯一方式
语法：

//vuex中
mutations:{
     mutation名(state,payload){
           state.属性名 = payload
     }
}
// 组件中
this.$store.commit('mutation名' , payload )

actions
作用：异步操作更新state
语法：

//(1)组件 提交dispatch更新actions
//(2)actions：异步操作	
actions:{
     action名(context,payload){
           异步操作
           context.commit('mutation名' , 异步操作结果)
     }
}
//(3)获取异步操作结果，提交mutations更新
//(4)mutations : 同步更新state数据

modules
作用：模块化组织，让vuex中一个模块的数据提取封装在其他js文件中，同时也减少了命名冲突

语法：

//1.把相关代码封装到另一个文件
//2.开启命名空间namespaced:true
//3.在真正的vuex中的modules写入该模块

vuex原始语法 与 辅助函数语法

全局语法
原始语法

this.$store.state.属性名
this.$store.getters.属性名
this.$store.commit(' mutations名 '，载荷 )
this.$store.dispatch('actions名 '，载荷 )

辅助语法

自动生成计算属性（computed）
		...mapState([ ' 属性名 ' ])
		...mapGetters([ ' 属性名 ' ])
自动生成方法（methods）
		...mapMutations([' mutations名 ' ])
		...mapActions([' actions名 ' ])

模块化语法
原始语法

this.$store.state.模块名.属性名
this,$store.getters[ ' 模块名/属性名']
this.$store.commit(' 模块名/mutations名'，载荷)
this.$store.dispatch('模块名/actions名'，载荷)

辅助语法

自动生成计算属性（computed）
	    ...mapState(’模块名‘，[ ' 属性名 ' ])
		...mapGetters(’模块名‘，[ ' 属性名 ' ])
自动生成方法（methods）
		...mapMutations(’模块名‘，[' mutations名 ' ])
		...mapActions(’模块名‘，[' actions名 ' ])

使用模块化语法，必须开启命名空间：namespaced: true

4. EventBus / 全局事件总线 实现任意组件的通信

语法：
1.在main.js中挂载$bus

Vue.prototype.$bus = new Vue()
//或者
new Vue({
    beforeCreate(){
        Vue.prototype.$bus = this
    }
})

2.在A组件中绑定一个事件，当你点击这个事件时，会触发

this.$bus.$emit('事件名',传的值)

3.在B组件中的created/mounted中去监听事件

this.$bus.on('事件名',数据)

如何发布一个订阅模式？

1.通过 $on 监听/订阅一个事件；
2.通过 $emit 触发/发布一个事件；
3.一旦发布就会触发 $on 的回调。

function Vue() {
    this.bus = {}
  }

Vue.prototype.$emit = function (eventType,
 ...rest) {
    this.bus[eventType].forEach
    (callback => callback(...rest))
  }

Vue.prototype.$on = function (eventType,
 callback) {
    // 收集属性对应的方法
    if (this.bus[eventType]) {
      this.bus[eventType].push(callback)
    } else {
      this.bus[eventType] = [callback]
    }
  }

const $bus = new Vue()

ES6写法

class Vue{
    constructor() {
        this.bus = {}
    }
    $emit(eventType, ...rest) {
        this.bus[eventType].forEach
        (callback => callback(...rest))
    }
    $on(eventType, callback){
        if (this.bus[eventType]) {
      this.bus[eventType].push(callback)
    } else {
      this.bus[eventType] = [callback]
    }
    }
    
}

除了这些还有传值方式，这边的话自己去查文档，这些在工作中足够使用了