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将通过这个事件传递给父组件。