在我的Laravel + Vue.js SPA(单页应用程序(中，我正在使用BootstrapVue和VeeValidate。
EditProfile.vue文件中，我想从模板中的属性(即default_country_code(访问数据属性，即default_country_code。
我可以通过使用props来实现它，即：在 Vue 根实例中有一个数据属性，然后在EditProfile.vue文件中的props的帮助下在模板中使用它。
但是我想在模板中使用它而不使用任何props.因为如果我使用props，我需要在不同页面的模板部分中使用的所有 props 都必须在 Vue 根实例中定义。当那些将用作props的数据属性来自数据库时，我必须在相应的 Laravel 控制器方法中在数据库中进行多次查询，并在 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"
})
};
正如我之前所说，如何在不使用任何props的情况下在模板属性中使用default_country_code？
假设你尝试从子组件访问值，你可以访问 Vue 的状态。例如let someVar = $parent.default_country_code.
也就是说，使用props或类似vuex的东西来存储全局状态将是更好的做法。