前端之家收集整理的这篇文章主要介绍了
详解Vue组件之间的数据通信实例,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
最近在用vue做项目,学习了不少东西,但是有时候光顾着做项目却忘记要找个时间来整理一下最近的一些学习新得,因为是新手,所以可能会有错误的地方,欢迎指出和交流呀~~~
关于父子组件以及非父子组件之间的数据通信
1 父子组件之间数据通信
一般父组件向子组件传递数据用prop进行传递,注意,子组件不能对prop中的数据进行更改,vue中规定是防止子组件对父组件中的数据进行窜改。而子组件向父组件进行数据传递则可以通过事件触发父组件的事件来实现数据的传递。(是不是有点懵逼了,看个例子吧 )
(这里我就直接摘取一段项目中的例子代码来说明)
使用prop进行数据传递:
代码,父组件向子组件
传递数据(method,dialogFormvisible)
// 父组件的部分代码
// 父组件的script
代码
export default {
data () {
return {
method:{handle: 'add‘,title: '
增加员工'}
dialogFormvisible: false
}
}
}
// 子组件中则需要加prop属性数据 ,如下所示:
export default {
props: [ 'method','dialogFormVisible']
}
//所以只要父组件中的数据变化修改,子组件中的数据也会跟这修改;
代码
//子组件中的事件分发
export default {
methods: {
// 关闭弹出框
closeDialog () {
this.$emit('close',false) //这里就是直接触发子组件的close事件,一旦这个执行,父组件中的对应方法就会执行。
}
}
}
// 当那边触发关闭事件的时候,这边的显示值就要关闭,那边会传过来一个false
// 父组件的事件
export default {
methods: {
// 当那边触发关闭事件的时候,这边的显示值就要关闭,那边会传过来一个false
closeDialog (val) {
this.dialogFormVisible = val
}
}
}