vue 组件之间传递数据

最新推荐文章于 2024-07-23 14:29:05 发布

面向未来的历史

最新推荐文章于 2024-07-23 14:29:05 发布

阅读量704

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/a1368783069/article/details/80680848

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

父组件向子组件传递数据

有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>