在child.vue中,msg实在data中定义的变量,使用props:['msg']从父组件中获取msg的值
父组件部分:
在调用组件的时候,使用v-bind将msg的值绑定为parent.vue中定义的变量message,这样就能将parent.vue中的message的值传给child.vue了。
单项数据流
当父组件的 message 发生改变,子组件也会自动地更新视图。但是在子组件中,我们不要去修改 prop。如果你必须要修改到这些数据,你可以使用以下方法:
方法一:把 prop 赋值给一个局部变量,然后需要修改的话就修改这个局部变量,而不影响 prop
方法二:在计算属性中对 prop 进行处理
二、子组件向父组件传递数据
子组件主要通过实践传递数据给父组件的
子组件部分:
子组件的html中,当input中的值发生改变时,将username传递给parent.vue。
首先声明了一个sendUser方法,用change事件来调用sendUser。
export default {
name: 'parend',data () {
return {
username: ''
}
},methods: {
sendUser () {
this.$emit('changeName',this.username)
}
}
}
在sendUser中,使用$emit来遍历changeName事件,并返回this.name,其中changeName是一个自定义的事件,功能类似于一个中转,this.name将通过这个事件传递给父组件。
父组件部分:
在父组件中声明了一个getUser方法,用changeName事件调用getUser方法,获取从子组件传递过来的参数username
import child from './child.vue'
export default {
name: 'parent',data () {
return {
user: ''
}
},methods: {
getUser(data) {
this.user = data
}
}
}
getUser方法中的参数msg就是从子组件中传递过来的参数uesrname。
三、同级组件间的数据传递
有时候两个组件也需要通信(非父子关系)。当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线。
组件c1中:
组件c2中:
在实际运用中,一般将bus抽离出来:
组件调用时引用(import Bus from './Bus.js')
但这种引入方式,经过webpack打包后可能会出现Bus局部作用域的情况,即引用的是两个不同的Bus,导致不能正常通信
实际运用:
将Bus注入到Vue根对象中
在子组件中通过this.$root.Bus.$on(),this.$root.Bus.$emit()
来调用
总结
以上所述是小编给大家介绍的vue组件中的数据传递方法。编程之家 52php.cn 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!