vue 组件之间传递数据

父组件向子组件传递数据

有PageA， PageB 组件(父组件)，这两组件将使用 Header组件（子组件）， Header 中的 显示的数据来自 PageA 与 PageB中。

目录结构:

-components
 -- PageA.vue
 -- PageB.vue
 --sub
  -- Header.vue

Header.vue 代码
假设 要值的变量名为 name
子组件Header 需要从 父组件PageA中获取 name的值， 需要在子组件Header中添加 props: ['name] 选项。data中可以不用定义 name。

<template>
  <div class="header">
      <h1>{{name}}</h1>
  </div>
</template>

<script>
export default {
  name: 'header',
  props: ['name'],
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

父组件PageA 代码
需要在引用 Header 组件时，添加属性绑定， 所以 Name 不用大括号。Name是 PageA data 中定义的变量， 可以在 created 或者 其他地方进行赋值。 这样 PageA 中的 Name 值 将会传到 子组件 Header 中的 name。

<template>
  <div class="editHome">
    <sub-header v-bind:name="Name"></sub-header>
  </div>
</template>

<script>
import Header from '@/components/sub/Header'
export default {
  name: 'EditHome',
  components: {
    'sub-header': Header 
  },
  data () {
    return {
      Name： ''
    }
  },
  created () {
     this.Name = 'pageA';
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

参考文章：
https://www.cnblogs.com/LoveAndPeace/p/7273648.html

< – private – >
https://cnodejs.org/topic/5816aabdcf18d0333412d323
http://es6.ruanyifeng.com/#docs/promise
< – end – >