How do multiple sibling components in Vue.js share a common component?

[question]: how do multiple sibling components share a common component?
[description]: enter my website and correspond to different components according to the route (hereinafter referred to as component 1). Among these components, there is also a common part (hereinafter collectively referred to as component 2), but in the public part, some data in it, I need to transmit different data according to component 1. How can this be implemented?
[effect]:

clipboard.png

clipboard.png

for example, at the top of figure 1 above, I want to pass both the title and the text, in the button according to component 1.
[Business]: the user clicks on the user information in figure 2 on the home page and jumps to figure 2 (user details interface). Other modules are similar.
[Code]: 

...
{ //2 router
    path: "/user", 
    name: "User", 
    meta: { ... }, 
    components: { 
        default: User, 
        footer: Footer 
    } 
}, {  //1 router
    path: "/user/detail", 
    name: "UserDetail", 
    meta: { ... }, 
    component: UserDetail
    //components: { 
        //default: UserDetail, 
        //header: Header  //2
     //} 
}
...

I want to use children in vue-router to implement it, but I find that I can"t do it.
I just entered the pit. How can I implement it? Give a train of thought is OK, the problem is a little rookie, do not like to spray, thank you!

Vue.js
Mar.21,2021

I know one way to use

in index.js 
Vue.component('header-item', {
  props: ['message', 'backUrl'],
  template: `...`
})

use

in other pages 
<header-item message="demo1" backUrl="/"></header-item>

but is there any other way? What is the general method used in the company's actual combat project?

method 2:
1, define a separate header.vue common component
code is as follows: (using iView) 

<template>
    <Layout>
        <Header>
            {{title}}
        </Header>
    </Layout>
</template>
<script>
    export default{
        props: ['title'],
        data () {
            return { }
        }
    }
</script>

2. Introduce it in vue-router/index.js as needed. The code is as follows: 

import Header from '**/Header'
...
{
  path: '/user/detail',
  name: 'Detail',
  meta: {...},
  components: {
    default: Detail,
    header: Header
  },
  props: {
    header: {
      title: ''
    }
  }
},
...

3, references in the page. The code is as follows: 

<router-view name="header"></router-view>

it is recommended that you define a separate vue component
control the display by passing values from parent and child components
import components in the desired page
the above method can, but the limitations are too great

you want to reuse the part separately encapsulated in a vue file, through props or vuex to state control.
component-based development is now a very important idea at the front end, it is recommended to learn.

Previous: Get request to javaController garbled

Next: The watch in mongodb was suddenly emptied.

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
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e45086-44b04.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e45086-44b04.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?