vue组件中的数据传递方法
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。组件之间传递数据大致分为三种情况:
父组件向子组件传递数据,通过 props 传递数据。
子组件向父组件传递数据,通过 events 传递数据。
两个同级组件之间传递数据,通过 event bus 传递数据。
一、父组件向子组件传递数据
子组件部分:
<template> <div class="child"> {{ msg }} </div> </template> <script> export default { name: 'child', data(){ return { } }, props: ['msg'] </script>
在child.vue中,msg实在data中定义的变量,使用props:['msg']从父组件中获取msg的值
父组件部分:
<template> <div class="child"> child <child :msg="message"></child> </div> </template> <script> import child from './child.vue' export default { name: 'parent', components: { child }, data () { return { message: 'hello vue' } } } </script>
在调用组件的时候,使用v-bind将msg的值绑定为parent.vue中定义的变量message,这样就能将parent.vue中的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 + ' 哈哈哈'; } } }
二、子组件向父组件传递数据
子组件主要通过实践传递数据给父组件的
子组件部分:
<template> <div class="child"> <span>用户名:</span> <input v-model="username" @change="sendUser" /> </div> </template>
子组件的html中,当input中的值发生改变时,将username传递给parent.vue。
首先声明了一个sendUser方法,用change事件来调用sendUser。
<script> export default { name: 'parend', data () { return { username: '' } }, methods: { sendUser () { this.$emit('changeName', this.username) } } } </script>
在sendUser中,使用$emit来遍历changeName事件,并返回this.name,其中changeName是一个自定义的事件,功能类似于一个中转,this.name将通过这个事件传递给父组件。
父组件部分:
<template> <div class="parent"> <child @changeName="getUser"></child> <p>用户名:{{user}}</p> </div> </template>
在父组件中声明了一个getUser方法,用changeName事件调用getUser方法,获取从子组件传递过来的参数username
<script> import child from './child.vue' export default { name: 'parent', components: { child }, data () { return { user: '' } }, methods: { getUser(data) { this.user = data } } } </script>
getUser方法中的参数msg就是从子组件中传递过来的参数uesrname。
三、同级组件间的数据传递
有时候两个组件也需要通信(非父子关系)。当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线。
<template> <div id="app"> <c1></c1> //组件1 <c2></c2> //组件2 </div> </template>
组件c1中:
<template> <div class="c1"> page <button @click="changeMsg">click</button> </div> </template> <script> var Bus = new Vue(); //为了方便将Bus(空vue)定义在一个组件中,在实际的运用中一般会新建一Bus.js export default { name: 'c1', data () { return { message: 'hi' } }, methods: { changeMsg () { //点击按钮,将this.message传递给c2 bus.$emit('sendMsg', this.message) } } } </script>
组件c2中:
<template> <div class="c2"> {{msg}} </div> </template> <script> var Bus = new Vue(); export default { name: 'c2', data () { return { msg: '' } }, created () { bus.$on('sendMsg',(data)=>{ //data即为c1组件中的message this.msg = data }) } } </script>
在实际运用中,一般将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组件中的数据传递方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
- vue2.0 兄弟组件数据传递方法
- vue.js组件之间传递数据的方法
- vue组件间的数据和方法传递
- vue2.0父子组件间传递数据的方法
- vue2.0 父组件给子组件传递数据的方法
- vue组件间的数据和方法传递
- vue中各组件之间传递数据的方法示例
- Vue 父子组件的数据传递、修改和更新方法
- Vue之父组件向子组件传递数据
- 一篇文章读懂Android组件之间数据传递方法 IPC进程通信方法AIDL介绍
- vue项目中做编辑功能传递数据时遇到问题的解决方法
- vue.js组件之间的通讯-----父亲向儿子传递数据,儿子接收父亲的数据
- 三、Vue(组件、组件间数据传递、slot内容分发、vue-router路由、单文件组件、vue-cli脚手架 )
- vuejs动态组件给子组件传递数据的方法详解
- vue中父子组件通信,异步数据传递
- vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由
- vue.js---父子组件之间简单的数据传递
- VUE快速入门新的——组件之间传递数据(1. Prop)
- Vue2.x中的父组件传递数据至子组件的方法
- vue.js之父组件向子组件传递数据