vue组件之间的通信_1

说明：下面我总结了比较常用的vue组件的通信方式。最近在准备面试，所以贴出一些总结分享道具和$emit。只有父子关系可以使用此方法。组件使用props向子组件传递参数，children使用$emit自定义事件props...data(){return{name:'marry'}}blog-postv-bind="post">post:{id:1,title:'MyJourneywithVue'}//相当于下面的...//propprops列为字符串数组：['name','age','address']//prop验证，当prop验证失败时，（开发环境构建版本）Vue会产生控制台警告//注意：以下类型不能写as'String'引用形式props:{//基本类型检查（`null`和`undefined`将通过任何类型验证）propA:Number,//多种可能的类型propB:[String,Number],//需要填充stringpropC:{type:String,required:true},//带默认值的数字propD:{type:Number,default:100},//具有默认值的对象propE:{type:Object,//对象或数组的默认值必须从工厂函数中获取default:function(){return{message:'hello'}}},//自定义验证函数propF:{validator:function(value){//这个值必须匹配以下字符串之一return['success','warning','danger'].indexOf(value)!==-1}}}//注意那些props会在创建组件实例之前进行验证，所以实例的属性（如data，computed等）在默认情况下是不可用的或验证器功能$emit...方法：{myEvent(name){this.name=name}}

//使用自定义事件将子组件的值抛给父组件使用中央事件总线总线来解决跨级和兄弟组件的通信问题。它巧妙地使用了一个publicvue实例，并使用了$on,$emit,$off（移除自定义事件监听器）方法一：可以在main.js中使用，在Vue的原型上挂载一个publicVue实例$bus，这样vue.prototype.$bus=newVue()可以在世界任何地方使用，然后在需要的地方注册接收参数的自定义事件和回调函数this.$bus.$on('changeName',name=>{this.name=name})需要改变时触发事件并抛出参数this.$bus.$emit('changeName','wzj')方法二：定义一个util.js文件importVuefrom'vue'constbus=newVue()exportdefaultbus在需要使用总线的文件中引入importbusfrom'../util'//文件路径不一定//在一个文件中定义事件bus.$on('changeName',name=>{this.name=name})//在另一个文件中抛参数bus.$emit('changeName','wzj')vuexfor项目比较复杂，多组件共享状态，层级不同需要沟通核心合作ncepts:state,getter,mutation,action,module//store/index.jsimportVuefrom'vue'从'vuex'导入VuexVue.use(Vuex)exportda故障新Vuex.Store({state:{name:'',age:0},getters:{tranName(state){return'name:'+state.name}},mutations:{changeName(state,name){state.name=name}},/*Action函数接受一个与store实例具有相同方法和属性的context对象，所以你可以调用context.commit来提交一个mutation，或者获取state和getters*/actions:{//异步函数，但还是需要触发mutationsfunctionoperationstatechangeName(context,name){context.commit('changeName',name)}},modules:{}})inthecomponent使用方法一：//accessstatepropertythis.$store.state.name//访问getterspropertythis.$store.getters.tranName//访问mutationsthis.$store.commit('changeName','wzj')//访问actionsthis.$store.dispatch('changeName','wzj')方法二：使用辅助函数映射到本地，这里只介绍简单的方法，更多见官网import{mapState,mapGetters,mapMutations,mapActions}from'vuex'//stateandgetters映射到本地计算属性，使用计算作为计算属性：{...mapState(['name','age']),...mapGetters(['tranName'])}//mutationsandactionmethods:{//change`this.changeName()`映射到this.$store.commit('changeName')`...mapMutations(['changeName'])//将`this.changeName()`映射到`this.$store.dispatch('changeName')`...mapActions(['changeName'])}$attrs和$listeners父子组件，用上面的方法有点大材小用或者第一个有点不方便$attrscontainstheinactioninparentscopeprop是公认的（和获取的）属性绑定（类和样式除外）。当一个组件没有声明任何props时，所有的父作用域绑定（除了class和style）都会被包含在这里，并且可以通过v-bind="$attrs"传递到内部组件中。$listeners包含父作用域中的v-on事件监听器（没有.native装饰器）。它可以通过v-on="$listeners"传递给内部组件——在创建更高级别的组件时很有用。示例：//app.vue...data(){return{age:10}},methods:{changeAge(age){this.age=age}}//one.vue...props:['name','age'],//two.vue...props:['address'],//使用$attrs传递给最后一个属性，使用时声明propsmethods:{change(){this.$emit('changeAge',30)}}理解：其实祖先组件的属性和事件还是一层层往下传递，只是在传递过程中使用了$attrs和$listeners来优化和简化写法，在传递过程中，任何声明$listeners的组件都可以触发里面的所有事件，而用$attrs声明的组件只能使用剩余的属性以前没有用props声明的s。