vue组件中的数据传递方法

vue组件中的数据传递方法

vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。组件之间传递数据大致分为三种情况：

父组件向子组件传递数据，通过 props 传递数据。

子组件向父组件传递数据，通过 events 传递数据。

两个同级组件之间传递数据，通过 event bus 传递数据。

一、父组件向子组件传递数据

子组件部分：

{{ msg }}

在child.vue中，msTDjhzg实在data中定义的变量，使用props：['msg']从父组件中获取msg的值

父组件部分：

child

在调用组件的时候，使用v-bind将msg的值绑定为parent.vue中定义的变量message，这样就能将parent.vTDjhzue中的message的值传给child.vue了。

单项数据流

当父组件的 message 发生改变，子组件也会自动地更新视图。但是在子组件中，我们不要去修改 prop。如果你必须要修改到这些数据，你可以使用以下方法：

方法一：把 prop 赋值给一个局部变量，然后需要修改的话就修改这个局部变量，而不影响 prop

export default {

data(){

return {

newMessage: null

}

},

props: ['message'],

created(){

this.newMessage = this.message;

}

}

方法二：在计算属性中对 prop 进行处理

export default {

props: ['message'],

computed: {

newMessage(){

return this.message + ' 哈哈哈';

}

}

}

二、子组件向父组件传递数据

子组件主要通过实践传递数据给父组件的

子组件部分：

用户名：

子组件的html中，当input中的值发生改变时，将username传递给parent.vue。

首先声明了一个sendUser方法，用change事件来调用sendUser。

在sendUser中，使用$emit来遍历changeName事件，并返回this.name，其中changeName是一个自定义的事件，功能类似于一个中转，this.name将通过这个事件传递给父组件。

父组件部分：

用户名：{{user}}

在父组件中声明了一个getUser方法，用changeName事件调用getUser方法，获取从子组件传递过来的参数username

getUser方法中的参数msg就是从子组件中传递过来的参数uesrname。

三、同级组件间的数据传递

有时候两个组件也需要通信（非父子关系）。当然Vue2.0提供了Vuex，但在简单的场景下，可以使用一个空的Vue实例作为中央事件总线。

//组件1

//组件2

组件c1中：

page

click

组件c2中：

{{msg}}

在实际运用中，一般将bus抽离出来：

//Bus.js

import Vue from 'vue'

const Bus = new Vue()

expore default Bus

组件调用时引用（import Bus from './Bus.js'）

但这种引入方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信

实际运用：

将Bus注入到Vue根对象中

import Vue from 'vue'

const Bus = new Vue()

var app= new Vue({

el:'#app',

　　 data:{

　　　　Bus

}　　

})

在子组件中通过this.$root.Bus.$on(),this.$root.Bus.$emit()来调用

总结

以上所述是给大家介绍的vue组件中的数据传递方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，会及时回复大家的。在此也非常感谢大家对我们网站的支持！

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。