vue的父子组件和局部全局组件有什么区别？

Question

我只知道全局组件和局部组件 不知道什么是父子组件 手册也没有介绍 网上的教程也没有说什么是父组件和子组件 直接就讲了父子通信和父子传值之类的东西 刚看到组件这里 感觉很困惑 哪位大神能给解释一下父子组件呢？

Answer 1

就是在组件里面使用另外一个组件，就形成了父子关系

例如在component1中使用component2
component1就是component2的父组件
component2就是component1的子组件

//component1.vue
<template>
   <div>
        <component2></component2>
   </div>
<template>
...
import component2 from 'component2.vue'

Answer 2

@Zany
我是新手，很感谢您能回复我，或许是我官方教程看的不够仔细，还是不太理解您的回答，请看下面的例子。

<div id="app-4">
     <div id="app-5" :style="{ fontSize: postFontSize + 'em' }" >
        <blog-post3 v-for="post in posts" v-bind:post="post" v-bind:key="post.id" v-on:enlarge-text="postFontSize += 0.1 "> </blog-post3>
    </div>
</div>

<script>
    Vue.component('blog-post3', {
       props: ['post'],
       template: `
        <div>
            <h3> {{ post.title }}</h3>
            <button v-on:click="$emit('enlarge-text')">enlarge text</button>
            <div v-html="post.content"></div>
        </div>`
    });
    var app4 = new Vue({
      el: '#app-4',
      data: {
        posts: [
          { id: 1, title: 'My journey with Vue', content: '...content...' },
          { id: 2, title: 'Blogging with Vue', content: '...content...' },
          { id: 3, title: 'Why Vue is so fun', content: '...content...' }
        ],
        postFontSize: 1
      }
    });
</script>

以这个例子来说，是否可以理解为：app-4实例化后<div id="app-4"> 是父组件, <blog-post3>是其子组件.
如果不对的话，请问您说的div所在的组件是什么?

Answer 3

---

全局组件，顾名思义，到处都存在。定制性低，扩展性强。

局部组件，就是某处，例如 <page-a> 组件的 script 内，引入外部组件 <list> 后才存在于该组件内的组件。
一些不想到处使用的组件，就用局部组件。这种组件定制性高，扩展性差，一般是二次封装的专供该页面使用的组件。