vue组件通信 父传子 子传父 兄弟传值

vue组件通信

1.概念：将组件中的数据等一些值进行传递到其他的组件，可以实现跨页面分享数据
2.类别：组件通信分为父传子，子传父，兄弟传值，以及可以利用vuex进行组件传值

• 父传子：组件关系是父子关系，子组件在父组件中使用父组件可以通过动态绑定
  属性值进行传递

<Header :protype1="obj"><!-- 父组件中引用子组件并且通过动态绑定:protype   -->      <!-- obj则是需要传递的对象或者值 -->    
</Header>

子组件需要通过props进行接收props可以用数组形式也可以用对象形式数组形式里面
可以使用字符串接受的数据，可以直接使用，但是不能修改

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

子组件还可以通过对象形式进行接收传递过来的数据所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向错乱。如果非得修改prop的数据，那么我们可以通过$emit派发一个事件，去父组件中修改。如果用数组接受，是直接接受没有办法开启prop验证和设置默认值
如果要开启props验证和设置默认值我们需要用对象来接受数据，形式为：

props:{    
suibian:Array,    
title:String,    
age:{type:Number,           default:18//设置默认值 如果父组件不传数据 就是显示默认值 父组件传数据就是显示父组件传输的数据}  }

prop可以验证的数据类型：
-String-Number-Boolean-Array-Object-Date-Function-Symbol

• 子传父

需要在父中定义方法，然后在父组件中的子组件标签上通过定义事件来调用这个方法

<Footer :name="arr" @backFn="toggle1"></Footer>
methods:{      
toggle1(res){        
console.log("子组件方法触发了",res)        
this.ActiveIndex = res      }    },

​在子组件中的方法中通过this.$emit()来触发父组件中自定义事件，如果参数从第二个参数开始传递，第一个参数永远是自定义的事件名

methods:{    
toggle(index){this.$emit("backFn",index)this.isShow = index    } },

• 兄弟传值

新建一个空的vue实例担任总线，然后序需要传递数据的一方通过Bus.$emit()来派发事件，在接受数据的一方通过Bus.$on()来监听事件，数据是以回调函数的参数的形式传递过来的Bus.js需要导出数据

import Vue from "vue"
export default new Vue()

需要传递数据一方的通过Bus.$emit()进行传递 第一个参数是传递的方法名，第二个参数是需要传递过去的数据

 add(){        Bus.$emit("myFn",this.text)        console.log(this.text)    }

需要接收数据的一方通过Bus. $on()进行接收传过来的数据 第一个参数是和传第一方的方法名相同，
第二个参数是接收过来的数据

mounted() {    Bus.$on("myFn",(res)=>{        console.log(res)        this.message = res    })  
},

• vuex组件通信

state
对vuex中的数据经行存储，vuex五大核心之一，和组件中的data相似，都是存储数据的地方，定义方法时可以将state作为参数进行传递以及对state中的数据进行操作
vuex五大核心操作流程
在组件中通过dispatch调用actions中的方法，在action中用过commit来调用mutation中的方法，在mutation中可以直接操作state中的数据，只要state的数据发生改变后就会立即响应到组件上。
可以多个组件通过commit共用一些定义在state中的数据

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！