What is the difference between the parent and child components of vue and the local global components?

I only know global components and local components. I don"t know what parent-child components are, nor do I introduce the tutorials on the Internet. I just talked about parent-child communication and passing values. Which god can explain the parent-child component?

Vue.js
Apr.05,2021

is to use another component in a component to form a parent-child relationship

for example, using component2
component1 in component1 is the parent component of component2
component2 is a child component of component1 

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

@ Zany
I am a novice. Thank you for replying to me. Maybe I didn't read the official tutorial carefully enough or didn't quite understand your answer. Please see the example below. 

<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: '-sharpapp-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>

in this example, can it be understood that < div id= "app-4" > is the parent component and < blog-post3 > is its child component after app-4 instantiation.
if not, what is the component of the div you are talking about?

< hr > 


 <page-a>  script  <list>

Previous: Xxx = > xx = xxx what is the word es6?

Next: Use python selenium phantomjs to report an error when raspberry pie has no interface.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu