0

在我的 Laravel + Vue.js SPA（单页应用程序）中，我使用的是BootstrapVue和VeeValidate。

在EditProfile.vue文件中，我想default_country_code从模板中的一个属性访问数据属性，即default_country_code.

我可以通过使用propsie：在 Vue 根实例中有一个 data 属性，然后props在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

4

1 回答 1

-1

假设您尝试从子组件访问值，则可以访问 Vue 的状态。例如let someVar = $parent.default_country_code.

也就是说，使用props或类似vuex存储全局状态的东西会是更好的做法。

于 2019-12-23T16:18:04.317 回答