0
354
ViewsVuejs que pasa accesorios del componente principal al componente secundario no funciona
Soy novato y estoy a cargo de un proyecto usando Vuejs.
Aquí hay una página que usa un componente llamado DashboardCard y cada DardboardCard se pasa 2 accesorios es val e icono de la página, también conocido como el componente principal
Declaré accesorios en el componente DashboardCard, también conocido como componente secundario, pero el valor de todos los accesorios no se puede pasar ni asignar
Ahora tengo este error
ACTUALIZAR Aquí está el registro de Vuejs devtool, puede ver que se pasaron los accesorios 
2 answers
Answer question0
La razón es que incluso antes de que los accesorios tengan el valor, está intentando acceder a él. Así que hay dos maneras que sugeriría
Del componente principal ( Dashboard.vue ):
Intente pasarlo como :icon="'@/assets/sale.png'" y :val="'$700'"
y en el componente secundario ( DashboardCard.vue )
Método 1:
Declare dos variables de datos y configúrelas con los valores prop usando el controlador de reloj
export default { components: {DatePicker}, props: { icon: { type: String, default: '' }, val: { type: String, default: '' } }, data() { return { iconPath: '', amtVal: '' }; }, watch: { icon(newVal, oldVal) { this.iconPath = newVal; }, val(newVal, oldVal) { this.amtVal = newVal; } }y en la plantilla use sus variables de datos locales como
<span>{{amtVal}}</span> and <img :src="require(iconPath)" alt="icon" />Método-2:
Usar una propiedad calculada
export default { components: {DatePicker}, props: { icon: { type: String, default: '' }, val: { type: String, default: '' } }, computed: { getIcon() { return this.icon; }, getVal() { return this.val; } }y en plantilla
<span>{{getVal}}</span> and <img :src="require(getIcon)" alt="icon" />0
Le falta la etiqueta de finalización del script </script> en el componente DashboardCard , por lo que Vue no puede detectar las propiedades del componente. Al principio, pensé que había más código ahí abajo hasta que probé el sandbox.
Tenga en cuenta que en la extensión Vue devtools, se supone que un accesorio se encuentra debajo de la pestaña de props , que no es su caso.
Le sugiero que use algún tipo de fragmentos para evitar estos molestos errores tipográficos. Para mí yo uso Vetur . También ayuda con el resaltado de sintaxis, una extensión bastante útil.
https://marketplace.visualstudio.com/items?itemName=octref.vetur