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. e m i t ( ) 来 派 发 事 件 , 在 接 受 数 据 的 一 方 通 过 B u s . emit()来派发事件,在接受数据的一方通过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中的数据