Vue.js - 从模板内访问数据属性而不使用 vue 文件中的道具

Posted 2023-02-23

【中文标题】Vue.js - 从模板内访问数据属性而不使用 vue 文件中的道具

【英文标题】：Vue.js - access data property from within template without using props in vue file

【发布时间】：2020-04-14 21:59:19

【问题描述】：

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

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

我可以通过使用 props 来实现它，即：在 Vue 根实例中具有数据属性，然后在 EditProfile.vue 文件中的 props 的帮助下在模板中使用它。

但我想在模板中使用它而不使用任何props。因为如果我使用props，我需要在不同页面的模板部分中使用的所有道具都必须在 Vue root instance 中定义。而当那些将用作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"
        
                )
        
        ;

如何在模板属性中使用default_country_code，而不使用任何props，正如我之前所说的，通过Vue根实例的帮助？

【问题讨论】：

您可以使用像Vuex 这样的集中式存储来存储应该跨组件使用的数据。

@RossAllen，不使用Vuex 的任何方式？

如果您编写一些东西来支持您的用例，您将编写一个小型的、有限的 Vuex 版本。我建议添加 Vuex，因为随着您添加更多功能，它也会派上用场。

【参考方案1】：

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

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

【讨论】：

为什么需要访问父级？

我假设这就是数据所在的位置。如果您通过道具将数据传递给子组件（然后数据存在于调用子组件的组件中）。因此，在子组件中，您请求父组件的数据。

我说过我不会使用props。

你问为什么是 $parent。我解释说，在 your example 中使用 props 数据存在于父组件中。因此，如果没有道具，您将使用 $parent 从 WITHIN CHILD 访问数据。