热门搜索 :
考研考公
您的当前位置:首页正文

在vue组件中传递数据步骤详解

2020-11-27 来源:桦陀教育

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

子组件部分:

<template>
 <p class="child">
 {{ msg }}
 </p>
</template>
<script>
export default {
 name: 'child',
 data(){
 return {
 
 }
 },
 props: ['msg']
</script>

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

父组件部分:

<template>
 <p class="child">
 child
 <child :msg="message"></child>
 </p>
</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>
 <p class="child">
 <span>用户名:</span>
 <input v-model="username" @change="sendUser" />
 </p>
</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>
 <p class="parent">
 <child @changeName="getUser"></child>
 <p>用户名:{{user}}</p>
 </p>
</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>
 <p id="app">
 <c1></c1> //组件1
 <c2></c2> //组件2
 </p>
</template>

组件c1中:

<template>
 <p class="c1">
 page
 <button @click="changeMsg">click</button>
 </p>
</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>
 <p class="c2">
 {{msg}}
 </p>
</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()来调用

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

vue使用自定义icon图标步骤解析

Vue2x图片预览插件使用步骤详解

Top