Javascript Vue.js$子组件名称

我正在尝试按名称访问特定的子对象。现在，因为孩子在哪里，我用这个称呼孩子：

this.$root.$children[0]

只要孩子始终是

[0]

就可以了，但如果有一种方法可以做到：

this.$root.$children['detail']

我一直在想，

$refs

可能是我问题的答案，但却永远找不到一个能帮助我的方法

---

有什么想法吗？

您正在谈论的这个孩子真的是您想要访问它的组件的孩子吗？在这种情况下，

v-ref

确实是答案：

//在父组件的代码中，访问引用的子组件，如下所示：
此.$refs.detailsChild

---

您可以使用此属性：

this.$root.$children[0].$options.name

例如：

this.$root.$children.find(child => { return child.$options.name === "name"; });

---

您不一定需要

$refs

，事实上，如果您有深度嵌套的组件，它们有时是不可行的。我在搜索时多次发现这个问题，但最终还是果断地实现了我自己的解决方案，因为我经常遇到这种情况。不要在老派的循环中犹豫不决，它们是必要的，有两个原因，一个是，我测试

x所有的都差不多，但在Vue 2中，您需要使用：
而不是v-ref

然后，您只需使用
this.$refs.detailsChild我昨晚试图锁定一些孩子。我试图对输入调用
el.focus（）
。我的问题是，我试图从一个通过点击按钮触发的实例方法中执行该操作，而输入在第三方库中，我正在将其包装到另一个组件中

我的解决方案是在包装器组件上放置一个
ref

例如，如果您有这样的标记：

<my-dropdown ref="myDropdown"></my-dropdown>

 console.log(this.$refs.myDropdown);

 console.log(this.$refs.myDropdown.$refs);

 console.log(this.$refs.myDropdown.$refs.libWrapper);

 this.$refs.myDropdown.$refs.libWrapper.$refs.someThing.focus();
 this.$refs.myDropdown.$refs.libWrapper.$refs.someThing.click();

在
my library wrapper
内部，您可以从包含引用的
node_modules
导入库。大多数库都会将引用放在对象上，以便您可以使用这些对象来定位它们

现在，您可以开始使用如下代码瞄准我们的示例组件：

<my-dropdown ref="myDropdown"></my-dropdown>

 console.log(this.$refs.myDropdown);

 console.log(this.$refs.myDropdown.$refs);

 console.log(this.$refs.myDropdown.$refs.libWrapper);

 this.$refs.myDropdown.$refs.libWrapper.$refs.someThing.focus();
 this.$refs.myDropdown.$refs.libWrapper.$refs.someThing.click();

乍一看，这可能看起来很奇怪，但与
this.$refs.myDropdown.$children[0]。$children[1].focus（）相比，这样做的好处是：是指
参考文件
的脆性要小得多。如果您或其他人稍后将
添加到标记中，则使用
refs
的代码不会中断，因为Vue是按名称而不是按相对距离查找这些ref命名的元素

我的建议是将
ref=“something”
放在某物上并执行
console.log（this.$refs.something.$refs）并查看您可以看到的内容，在执行此操作时，执行
console.log（this.$refs.something）
并查看那里还有哪些其他可用的东西，比如
$attrs
和
$children
和
$el

var childComponent = false; 
$.each(this.$root.$children,function(i,child){       
   if(child.$route.name === component){             
      childComponent = child;        
    } 
});

如果您在routes中指定了“name”，则可以使用此解决方案。
请使用更多信息进行编辑。不鼓励使用“仅编码”和“尝试此项”回答，因为它们不包含可搜索的内容，并且不解释为什么有人应该“尝试此项”。对于使用Vue v2的用户，您可以改为在模板中设置ref属性，如下所示：。这只是访问
$children
数组中第一个组件的名称，而不是OP所要求的。这是怎么回事？您的一行代码正在访问数组中第一个元素的名称。您尚未解释如何使用这行代码来解决OP的问题。您可以使用find:
this.$root.$children.find（child=>{return child.$options.name===“name”；}）。我将更新答案。要按组件名称选择子组件：
this.$root.$children.find（child=>{return child.$options.\u componentTag===“tabs component”；}）
我认为对于这个，您需要像这样向您的孩子添加变量名。
导出默认值{name:'}
建议编辑到
detailsChild
以修复javascript语法。或者使用
this.$refs[“details child”]
（假设vue支持该功能）
 console.log(this.$refs.myDropdown);

 console.log(this.$refs.myDropdown.$refs);

 console.log(this.$refs.myDropdown.$refs.libWrapper);

 this.$refs.myDropdown.$refs.libWrapper.$refs.someThing.focus();
 this.$refs.myDropdown.$refs.libWrapper.$refs.someThing.click();

var childComponent = false; 
$.each(this.$root.$children,function(i,child){       
   if(child.$route.name === component){             
      childComponent = child;        
    } 
});