每当我们创建封装好一个组件后，这些组建彼此之间并没有联系，都是独立的组件

main.js文件中render节点指向着一个组件（比如App.vue这个组件）

既然前端工程化推荐模块化、组件化，那么我们就需要创建多个组件并建立它们之间的联系

一起渲染完成整个项目的搭建

我们可以根据彼此之间的嵌套，形成父子、兄弟关系

我们建立关系时可以有俩种方案选择：私有子组件---全局组件

当一个组件复用次数很多的话，我们可以使用全局组件

相反：如果一个组件只需要使用1~2次的话，我们可以选择注册私有子组件

私有子组件

全局组件

私有子组件

私有子组件顾名思义：

如果在A组件中注册了一个C组件，那么它C组件只能在A组件中使用，在B组件中是不能使用的

如果同样想在B组件中使用，那么C组件必须再在B组件中注册一遍

我们可以使用components节点注册私有子组件:

我们从第一步到最后一步演示一下怎么去注册并使用一个私有子组件

1.我们在父组件中使用import语法导入私有子组件（当然在这之前我们需要创建一个.vue的组件）
import Test from '@/components/测试.vue'
2.接下来在export default（）中定义一个components节点，注册节点：
export default {
  components: {
    Test
  }
}

//这里使用的是简写
//只有我们键和值一致的时候才可以使用简写
//完整写法：'Test':Test
3.以标签的形式使用刚才注册好的组件：
<div id="app">
    <h1>App组件</h1>
      <hr>
      <Test></Test>
</div>

全局组件

我们在vue项目中的main.js入口文件中通过Vue构造函数的components方法可以注册一个全局组件

我们不需要在每一个组件中都注册一遍了

1.在main.js入口文件中导入需要全局注册的组件：
import Count from '@/components/Count.vue'
2.在main.js入口文件中注册全局组件：
Vue.component('MyCount',Count)

//参数1：字符串格式的组件注册名称（我们在使用组件的时候就用这个字符串）
//参数2：需要被全局注册的组件名称

接下来我们看一下效果：

main.js:

import Vue from 'vue'
import App from './App.vue'

//注册全局组件Count
import Count from '@/components/Count.vue'
Vue.component('MyCount',Count)

Vue.config.productionTip = false


new Vue({
  render: h => h(App)
}).$mount('#app')

父组件App.vue：

<template>
  <div id="app">
    <h1>App组件
      <hr>
      <Test></Test>
      <hr>
      <MyCount></MyCount>
    </h1>
  </div>
</template>

<script>
import Test from '@/components/测试.vue'

export default {
  components: {
    Test
  }
}
</script>

<style lang="less">
h1 {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  color: #b0df41;
  margin: 30px;
  height: 500px;
  width: 500px;
  background-color: antiquewhite;
}
</style>

私有子组件——测试组件：

<template>
    <div id="app">
        <h2>我的姓名是：{
   
   { username }}我的年龄是：{
   
   { age }}</h2>
    </div>
</template>

<script>
export default {
    data(){
        return {
            username:"小蜗",
            age:22
        }
    }
}
</script>

全局组件——Count组件：

<template>
  <p>你好呀</p>
</template>

效果：

npm run serve

私有子组件与全局组件的注册

私有子组件

全局组件

猜你喜欢