vue.js - Vueファイルで小道具を使用せずに、テンプレート内からデータプロパティにアクセスするにはどうすればよいですか?

Question

私の Laravel + Vue.js SPA (Single Page Application) では、BootstrapVueとVeeValidateを使用しています。

ファイルでは、データ プロパティ、つまりテンプレートの属性からEditProfile.vueアクセスしたいと考えています。default_country_codedefault_country_code

propsie: Vue ルート インスタンスにデータ属性を持ち、propsin file を使用してテンプレートで使用することで実現EditProfile.vueできます。

しかし、何も使用せずにテンプレートで使用したいprops。を使用する場合props、さまざまなページのテンプレート セクションで使用する必要があるすべての小道具を Vue ルート インスタンスで定義する必要があるためです。また、使用されるデータ属性がpropsデータベースからのものである場合、対応する Laravel コントローラー メソッドで DB で複数のクエリを作成し、それらを Vue ルート インスタンスで使用する必要があります。そして、このアプローチは疎結合のアーキテクチャではないように思えます。

EditProfile.vueページには、次のものがあります。

    <template>     
             <ValidationProvider vid="name" rules="required" name="name" v-slot="{ valid, errors }">
                           
                  <b-form-group
                                    label="Name:"
                                    label-for="exampleInput1"
        
                            >


                      <b-form-input

                                v-model="name"
                                default-country-code="default_country_code"
                                :state="errors[0] ? false : (valid ? true : null)" 
                                placeholder="Enter Name"

                       ></b-form-input
        
                                <b-form-invalid-feedback id="inputLiveFeedback">{{ errors[0] }}</b-form-invalid-feedback>
    
                  </b-form-group>

             </ValidationProvider>
        
</template>         
                        
        
        export default {
                name: "EditProfile",
                props: {
        
                },
               data: () => ({
                    name:"Mr. XYZ",
                    default_country_code:"FR"
        
                })
        
        };

前に言ったように、Vue ルート インスタンスの助けを借りてdefault_country_code、テンプレート属性を使用せずに使用するにはどうすればよいですか?props