关于子组件与父组件

Vue的其中一个概念就是组件化，到底怎么实现组件化，由此我们知道组件分为父组件和子组件。通常父组件包含子组件，子组件还能拥有子组件。

我们在移动端应用时，几乎每一个页面会包含Header、Footer、Content.那么我们页面中的Header、Footer就可以摘出来变成页面的子组件，然后页面调用这个这个子组件，减少代码量。

一个小栗子

我们要建一个底部导航栏的子组件，并在主页面中使用它。

1. 新建一个子组件的页面

   
   
   newVue.png
2. 在子组件中编写导航栏

<template>
  <div>
    <ul>
      <li>我的</li>
      <li>首页</li>
      <li>详情页</li>
    </ul>
  </div>
</template>

3.在父组件中引入子组件并在components中注册

import tabBar from "../pulic/tabBar.vue";
export default {
  name: "welcome",
    data() {
       return {
        price:15
        }
    }
  }
  components:{
      "tab-bar":tabBar,
    }
 }

4. 在页面中以标签使用

    <tab-bar></tab-bar>

如何在创建并使用子组件就结束啦，下一篇我们讨论父子组件的传值