Vue 부모 어셈블리의 서브어셈블리 값 전송 방법 및 전체 인스턴스의 서브어셈블리 전송

부모 구성 요소는 어떻게 서브 구성 요소에 값을 전달합니까?나는 대체적인 방법을 총결하여 다음과 같다.

부모 구성 요소가 서브 구성 요소를 호출할 때 동적 속성을 귀속시킨다

<v-header :title="title">v-header>    

서브어셈블리에서props를 통해 서브어셈블리에서 전송된 데이터를 수신

전체 코드는 다음과 같습니다. Home.vue

<template>
    
    <div id="home">
        
        <v-header :title="title" :homemsg='msg' :homerun='run' :home="this">v-header> 
        
        <hr>
            
    div>

template>

<script>
/**
 *          
 * 
 *  1.                  
 *      
 *  2.         props           
 * 
 */
import Header from './Header.vue';   
export default{
    data(){
        return {
            msg:'    home  ',
            title:'  ',
        }
    },
    components:{
        'v-header':Header,   //    
    },
    methods:{
        run(data){
            alert('  Home   run  '+data)  // data   
        }
    },
}
script>

<style scoped>
    
style>

Header.vue

<template>
    <div>
        <h2>        ---{{title}}---{{homemsg}}h2>   

        <button @click="homerun('123')">         button>   

        <button @click="getParent()">            button>

    div>
template>

<script>
export default {
    data(){
        return{
            msg:'    msg'/*         msg，
                        */
        }
    },
    methods:{
        getParent(){
            //alert(this.title)       title   
            //alert(this.home.title)            title   

            this.home.run()      //     run   
        }

    },
    props:['title','homemsg','homerun','home']  //               

}
script>

이 아나운서가 독자들에게 도움을 줄 수 있기를 바랍니다. 만약 어떤 의문이나 이해가 되지 않는다면 아래에서 평론해 주십시오. 감사합니다.