美文网首页
vue组件中的数据传递

vue组件中的数据传递

作者: 晴_eeca | 来源:发表于2018-05-14 14:10 被阅读97次

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父子组件传递数据方法

    标签(空格分隔): vue 父组件向子组件传递数据 Vue中父组件向子组件传递数据用props 举个例子 父组件中...

  • vue组件间通信

    vue组件间通信 1.父组件向子组件传递数据--props 在vue2.0中使用props实现向子组件传递数据: ...

  • vue学习

    vue中的事件传递 父子组件传值通过props传递,父组件 :name=“name(父数据)”子组件 props内...

  • Vue组件间数据传递

    前言 总结vue组件间的数据传递 路由传参 父组件传递数据给子组件---props 子组件传递数据给父组件---$...

  • Vue 组件数据传递

    Vue 组件数据传递 父组件->子组件 父组件到子组件的数据通过 props 传递 在父组件注册子组件,传递数据到...

  • vue-resource vue-axios传递数据

    使用vue-resource传递数据 在Home.vue组件中传送数据 src/model/Storage.js中...

  • vue中父子组件之间通信的方式

    1,父组件给子组件传递数据 vue中使用props向子组件传递数据1): 子组件在props中创建一个属性,用于接...

  • vue 事件总线EventBus的概念、使用以及注意点

    vue组件中的数据传递最最常见的就是父子组件之间的传递。父传子通过props向下传递数据给子组件;子传父通过$em...

  • 深入理解Vue 组件之间传值

    在 Vue 中,可以使用props向子组件传递数据。 子组件部分: 这是 header.vue 的 HTML 部分...

  • 2021-03-19

    vue中的provide和inject 父组件向子孙组件传递数据,轻松跨级访问父组件数据 npm install ...

网友评论

      本文标题:vue组件中的数据传递

      本文链接:https://www.haomeiwen.com/subject/ygpddftx.html