07-vue组件vue 组件组件在被封装好之后，彼此之间是相互独立的，不存在父子关系在使用组件的时候，根据彼此的嵌套

vue 组件

组件在被封装好之后，彼此之间是相互独立的，不存在父子关系
在使用组件的时候，根据彼此的嵌套关系，形成了父子关系、兄弟关系

使用组件的三个步骤

chrome_lWVOrWwdB7

在App.vue中使用组件三个步骤

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- 3.以标签形式使用注册好的组件 -->
      <Left></Left>
      <Right></Right>
    </div>
  </div>
</template>

<script>
// 1.导入需要使用的vue组件
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'

export default {
  // 2.注册组件
  components:{
    Left,
    Right
  }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>

chrome_EagH2aQcTP

通过 components 注册的是私有子组件

例如：

在组件 A 的 components 节点下，注册了组件 F。
则组件 F 只能用在组件 A 中；不能被用在组件 C 中。

注册全局组件

在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。示例代码如下：

chrome_BOBlLpqBTx

// 导入 vue 这个包，得到 Vue 构造函数
import Vue from 'vue'
// 导入 App.vue 根组件，将来要把 App.vue 中的模板结构，渲染到 HTML 页面中
import App from './App.vue'

// 导入需要被全局注册的组件
import Count from '@/components/Count.vue'
Vue.component('MyCount',Count)

Vue.config.productionTip = false

// 创建 Vue 的实例对象
new Vue({
  // 把 render 函数指定的组件，渲染到 HTMl 页面中
  render: h => h(App),
}).$mount('#app')