Vue で親コンポーネントから子コンポーネントにデータを渡すいくつかの方法

//サブコンポーネント <テンプレート>
    <div @click="changeName('YYY')">{{名前}}</div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    props:['name']、//またはprops:{name:{type:String,default:''}}
    方法:{
        //子コンポーネントのプロパティデータを変更することはできません。親コンポーネントが処理できるようにイベントをトリガーする必要があります。changeName(newName){
            this.$emit('changeName',newName)
        }
    }
}
</スクリプト>
 
//親コンポーネント <テンプレート>
    <div>
        <child-comp :name="名前" @changeName="変更名"></child-comp>
    </div>
</テンプレート>
<スクリプト>
    'path' から childComp をインポートします。
    エクスポートデフォルト{
        データ（）{
            {name:'XXX'} を返します
        },
        コンポーネント:{
            子コンプ
        },
        方法:{
            名前を変更する(新しい名前){
                this.name = 新しい名前;
            }
        }
    }
</スクリプト>

//サブコンポーネント <テンプレート>
    <div>{{親メッセージ}}</div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    データ（）{
        戻る {
            親メッセージ:''
        }
    },
    方法:{
        getMsg(メッセージ){
            this.parentMsg = メッセージ;
        }
    }
}
</スクリプト>
 
//親コンポーネント <テンプレート>
    <div>
        <child-comp ref="child"></child-comp>
        <button @click="sendMsg">メッセージを送信</button>
    </div>
</テンプレート>
<スクリプト>
    'path' から childComp をインポートします。
    エクスポートデフォルト{
        コンポーネント:{
            子コンプ
        },
        方法:{
            送信メッセージ(){
                this.$refs.child.getMsg('親メッセージ');
            }
        }
    }
</スクリプト>

//子供
<テンプレート>
    <div>{{アプリ名}}</div>
</テンプレート>
<スクリプト>
エクスポートデフォルト{
    挿入:['appName']
}
</スクリプト>
 
//根 
エクスポートデフォルト{
    データ（）{
        戻る {
            アプリ名:'テスト'
        }
    },
    提供:['appName']
}