Nested components 组件之间的嵌套

嵌套方式

1. Gloablely

一次注册, 全局使用的 component

a. 在 src 文件夹下创建一个 Test.vue 文件:

<template>
    <ul>
      <li v-for="name in names">{{ name }}</li>
    </ul>
</template>

<script>
export default {
  data () {
    return {
      names: ['Rachel', 'Ross', 'Emma']
    }
  }
}
</script>

<style>

</style>

b. 在 main.js 文件中, 全局注册 Test component, 添加如下:

import Test from './Test.vue'

Vue.component('test', Test);

c. 在 App.vue 文件中, 为 Test component 占位:

<template>
  <div>
    <p>{{ title }}</p>
    <!-- 放置 Test component 的位置, 必须在总的 div 里 -->
    <test></test>
  </div>
</template>

2. Locally

只在所添加的文件中有效.

a. 删除上一步在 main.js 文件中添加的内容.

b. 在 App.vue 中, 占位的位置不变, 另外添加如下内容:

<script>
// 引入文件
import Test from './Test.vue'

export default {
  components: {
    'test': Test,
  },

  data () {
    return {
      title: "My first Vue page"
    }
  }
}
</script>

Component CSS (scoped)

如果要想让 style 样式只对自身的 component 生效, 只要在 style 标签上 添加 scoped:

<style scoped>
    h1 {
      color: green
    }
</style>

Props

把每个页面需要用到的数据都写在 app.vue 组件中, 然后以 props 的形式传递给各个组件(各个页面). 这样做的好处就是, 如果有 10 个页面共用一些数据, 就可以实现, 一处修改, 全部更新的效果, 而不需要改 10 个页面.

通过下面的例子, 展示具体实现的方式:
首先, 把原本要用于 Article.vue 页面的 data 数据都挪到 app.vue 文件中.
app.vue 文件:

<template>
  <div>
    <!-- 对应 article.vue 组件 -->
    <!-- 通过数据绑定的方式, 把数据传递给 article.vue 组件 -->
    <my-article v-bind:family="family"></my-article>
  </div>
</template>

<script>
// 引入 article.vue 组件文件
import Article from './components/article.vue';

export default {
  components: { // 注册组件
    'my-article': Article,
  },

  data () {
    return {
    // 要用于 Article.vue 页面的数据
      family: [
        {name: 'Rachel', hobby: 'skating', show: false},
        {name: 'Ross', hobby: 'codding', show: false},
        {name: 'Emma', hobby: 'watch cartoon', show: false},
      ]
    }
  }
}
</script>

Article.vue 文件:

<template>
  <div>
    <b-list-group>
      <b-list-group-item v-for="people in family" v-on:click="people.show = !people.show">
        <h2>name: {{ people.name }}</h2>
        <h3 v-show="people.show">hobby: {{ people.hobby }}</h3>
      </b-list-group-item>
    </b-list-group>
  </div>
</template>

<script>
  export default {
    // 通过 props 接收来自 parent component 的数据
    props: {
      family: { // 数据名称
        type: Array, // 验证数据类型, 必须为数据, 否则报错
        required: true // 验证必须传递这个数据, 否则报错
      }
    },

    data () {
      return { // 原本这里的数据, 已被挪到 parent component 中

      }
    }
  }
</script>

上面两个文件中, 关于数据传递的关系示意图:

本作品采用《CC 协议》，转载必须注明作者和本文链接