javascript - 在实现 Vue-Router 的 VueJS SPA 中实现嵌套的 $refs
问题描述
我正在开发一个使用 / 的 Laravel/VueJS Vue
SPA Vue-Router
。我有一个 Vue 组件,它被分配了一个$ref
(在 Component C / Nested Child Component 内部),它封装在注入布局的主 Vue-Router 组件(Component B)中( Component A - Layout Component)
我需要访问与此相对应的元素$ref
(在组件 C中),但是我无法访问它,因为组件层次结构(在 Component A 中)是根据Component B中声明的信息构造的。
(Layout-Component / $root) - Vue Layout Component: --(Vue-Router-Component) -
Primary component injected into layout via Vue-Router - Child Component of
Component A --(dynamic-form-field) - Child Component of Vue-Router-Component
<Layout-Component ref="componentA">
<Vue-Router-Component ref="componentB">
<dynamic-form-field ref="componentC"></dynamic-form-field>
</Vue-Router-Component>
</Layout-Component>
我尝试$ref
使用标准的嵌套 $ref 语法访问:
this.$root.$refs['componentB'].$refs['componentC'].attribute
但是我无法访问from中$refs
声明的任何内容。Components B or C
Component A
我确定这是一个 Vue 生命周期问题,因为如果我直接在主布局中重新创建嵌套组件层次结构( Components A - C )(不使用在Component B$refs
中声明的数据),那么我可以通过上述语法毫无问题地访问嵌套.
问题源于根据Component B中声明的数据在Component-A (Layout-Component)中创建组件。
布局组件(组件 A)片段:
<template v-for="(input, field) in formDialog.inputs">
<template v-if="Array.isArray(input)">
<!-- for every record in the input array -->
<template v-for="(inputArrRecord, arrIndex) in input">
<v-col cols="12" class="p-0">
<v-btn
icon
x-small
v-if="arrIndex"
class="float-right"
color="error"
:title="
inputArrRecord.typeTitle
? `Remove ${inputArrRecord.typeTitle}`
: 'Remove'
"
@click="inputArrRecord.removeAction"
>
<v-icon>mdi-close-box-multiple-outline</v-icon>
</v-btn>
</v-col>
<template v-for="(inputArrRecordInput, field2) in inputArrRecord.inputs">
<!-- for every field in the array record -->
<dynamic-form-field
:ref="`dynamicFormField${field2}`"
:input="inputArrRecordInput"
:field="field2"
:mode="formMode"
:error="formDialog.errors[`${field}.${arrIndex}.${field2}`]"
></dynamic-form-field>
</template>
</template>
</template>
<dynamic-form-field
v-else
:ref="`dynamicFormField${field}`"
:input="input"
:field="field"
:mode="formMode"
:error="formDialog.errors[field]"
></dynamic-form-field>
</template>
数据声明(组件 B)片段:
export default {
data() {
return {
formDialog: {
errors: [],
show: false,
inputs: {
id: {
val: '',
save: true,
type: 'hidden',
},
word_data: [],
definitions: [],
tags: {
val: [],
save: true,
add: true,
type: 'autocomplete',
items: this.$root.cache.tags,
ref: 'vocabTagsAutocomplete',
label: 'Search For a Tag',
actionChange: this.addExistingTag,
actionKeydown: this.addNewTag,
},
synonym: {
val: '',
save: true,
add: true,
placeholder: 'Synonyms',
},
},
titleActions: [
{
icon: 'mdi-book-plus',
btnType: 'text',
text: 'Add Word Type',
event: this.cloneWordDataTemplate,
},
{
icon: 'mdi-book-plus-outline',
btnType: 'text',
text: 'Add Definition',
event: this.cloneDefinitionTemplate,
},
],
},
}
},
}
dynamic-form-field.vue(组件 C)内容:
<template>
<v-col
v-if="(mode == 'add' && input.add) || (mode == 'edit' && input.save)"
:cols="input.gridSize || 12"
>
<form-field-selection
:input="input"
:field="field"
:error="error"
:ref="`formFieldSelection${field}`"
></form-field-selection>
</v-col>
</template>
<script>
export default {
name: 'dynamic-form-field',
props: ['input', 'field', 'mode', 'error'],
}
</script>
如何从Component A访问在Component C$ref
中声明的内容?
解决方案
您的组件 C 可能正在发出一个事件,将自身作为数据发送:
// Component C
<script>
/*..component code..*/
mounted(){
this.$root.$emit('child_ready',this)
}
</script>
然后您可以在任何其他组件中听到该事件:
// Your layout
<script>
/*...layout code...*/
created(){
// Using created to make sure we add our listeners before any child mount
this.$root.$on('child_ready',onChild)
},
beforeDestroy(){
// cleaning the listener
this.$root.$off('child_ready',onChild)
},
methods:{
onChild(childRef){
// Now you can access properties and methods
// childRef.property()
// childRef.method()
}
}
<script>
推荐阅读
- c# - 构建后第一个程序调用控制台非常慢
- php - 如何在 php 模型中选择“喜欢”查询?
- wordpress - wordpress 中的分页无法正常工作
- android - unity3d中android蓝牙权限的批准
- xamarin - 如何在 Listview Xamarin Forms 中使用 Flex Layout?
- python - 阅读pdf并在关键字后查找下一个单词
- gcc - 如何让 GCC 强制执行纯/常量属性?
- vue.js - 如何覆盖 v-on:在 vue 中单击以进行日志记录
- r - 如何计算列 (R) 中的更改次数
- vue.js - 如何在 laravel 和 vue.js 中显示用户名而不是 id(外键)