Vue 2のコンポーネント間伝達パラメータ(関数に相当)遊び方(親子関係伝達と無関係伝達方法)

Vueのコンポーネントは、実は私たちjsの関数と論理的ですが、もっと抽象化されています.
コンポーネントを関数として理解し、より近づけるにはクラスとして理解することができます(属性と方法があり、インスタンスも構築できます)
コンポーネントはクラスに相当し、構築されたインスタンスに相当し、クラスインスタンスに相当し、オブジェクト向けのパッケージ思考!

//              ！
//...function...          ，   new Vue()  
//      ：    ，          ，          ,    ，       ！
function parent() {
    //       parent ;
    function son() {
        //       son ;
    }
}

コンポーネント間の伝達パラメータはhtmlラベル方式で伝達される2つの方式に分けられます!ペアレントコンポーネント用!もう1つはvm.$を直接使うことですon関数はjs内部で伝達されます!
 
1つ目は、親子コンポーネントの伝達方法です.
templateコードは次のとおりです.

 
jsコードは以下の通りです.

const app =  new Vue({
        el:".container",
        data:{
               g_data:"new Vue      ！"    
        },
        methods: {
        },
        components:{
            "my-parent":{
                template: "#parent",
                //       ，data     ,        （     ）
                data:function(){
                    return {
                        parent_data:"           ",
                    }
                },
                props:["parent_value"],
                methods:{
                    click_parent:function(...args) {
                        console.log(args);
                        console.log("    ");
                    },
                },
                components:{
                    "my-son":{
                        template:"#son",
                        data:function() {
                            return {
                                son_name:"    ",
                            }
                        },
                        props:["son_value"],
                            
                        methods: {
                            click_son:function(event) {
                               console.log("son         ,      .....");
                               //this.$emit        "son_data"       ，       ！
                               //    ：https://blog.csdn.net/weixin_43343144/article/details/86229116
                               this.$emit("son_data",[this.son_value,this.son_name]);
                            },

                        }
                    }
                   
                }
                
            },
        }

    });