Vue2.x Component之间进行数据传递

假设我们有一个父组件是 App.vue，子组件是Header.vue

父组件->子组件

在App.vue中，主要通过在app-header上绑定属性

<template>
  <div id="app">
    <app-header v-bind:title="title"></app-header>
  </div>
</template>
<script>
import Header from './components/Header'
export default {
  name: 'App',
  data(){
    return {
      title: 'this is my first vue'
    }
  },
  //局部注册组件
  components: {
    "app-header": Header
  }
}
</script>

在Header.vue中，通过props获取对应的属性

export default {
  name: 'Header',
  props: {
      title: {
        type: string,
        required:true
      }
  },
  data () {
    return {
    }
  }
}
</script>

子组件->父组件

子组件使用$emit，第一个参数是事件，第二个是值

<template>
    <div id="header">
        <h1 v-on:click='changeTitle'>{{title}}</h1>
    </div>
</template>

<script>
export default {
  name: 'Header',
  data () {
    return {
      title: 'Godfunc'
    }
  },
  methods: {
      changeTitle:function(){
          this.title = 'i am changed';
          this.$emit('titleChanged',this.title);
      }
  }
}
</script>

父组件触发事件方法，接收参数

<template>
  <div id="app">
    <app-header  v-on:titleChanged="updateTitle($event)"></app-header>
  </div>
</template>

<script>
import Header from './components/Header'
export default {
  name: 'App',
  data(){
    return {
    }
  },
  methods: {
    updateTitle: function(title){
        this.title = title;
        alert(title);
    }
  },
  //局部注册组件
  components: {
    "app-header": Header,   
  }
}
</script>

总结：父组件向子组件传递数据，是通过子组件的属性传递的；子组件向父组件传递数据时，是通过触发事件。