我正在学习 VueJS，将其与 Rails 应用程序一起使用，但在尝试从父组件访问组件时遇到问题。我可能做错了，但我不知道问题出在哪里。
我试图将我的问题归结为一个简单的 html 示例:
<html>
<head>
<meta charset='utf-8' />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
<outer>
<div>
<form>
<inner ref="testref"><input/></inner>
</form>
</div>
</outer>
</div>
<script>
let inner = Vue.component('inner', {
template: `
<div>
<span hidden="true"><slot></slot></span>
<input v-model="searchText" />
</div>
`,
props: ['placeholder'],
data: function() {
return {
searchText: this.placeholder
}
}
})
let outer = Vue.component('outer', {
template: `
<div>
<h3 v-on:click="testos">Hello: {{ client_id }}</h3>
<slot></slot>
</div>
`,
data: function() {
console.log('data', this.$refs.testref)
return {
client_id: ''
}
},
mounted: function() {
console.log('mounted', this.$refs.testref)
},
methods: {
testos: function() {
console.log('method', this.$refs.testref)
}
}
})
new Vue({
el: '#app',
components: {
'inner': inner,
'outer': outer
}
})
</script>
</body>
</html>
我收到以下控制台日志:
data undefined
mounted undefined
method undefined
我尝试遵循 https://v2.vuejs.org/v2/api/#ref 中的语法，但我也尝试过使用 :ref 而不是 ref，但效果并没有更好。
我知道存在“引用注册计时”的复杂性，即使我不完全理解它。但是点击 H3 的时机不应该是好的吗？我希望它甚至可以通过 mounted 来解决，就像 https://stackoverflow.com/a/40884455/2730032 中那样。 .
额外问题:我的问题实际上是关于 ref 的工作原理。然而，我确实有一个更普遍的问题，如果不使用 ref 的建议可能会受益。
我有一个令我满意的 inner 组件，它将 client_id 的输入字段与搜索字段包装在一起，该搜索字段从 API 中提供一些类似选择的选项，并将输入字段 client_id 设置为选定的选项。我想在 outer 组件中重用该 inner 组件，该组件将使用 client_id(每当它被 inner 更改时)来调用API 并填充 outer 组件中的一堆其他表单字段(这些字段通过槽从 inner 到 outer 给出)。如果这有任何意义的话。
我认为最好的方法是将 client_id 作为 inner 的数据字段，并让 outer 通过 ref 访问它。所以在这里我试图让 ref 工作。
编辑1:有一个复制错误，对此深表歉意。 test1 标签来自以前的版本。但无论如何我都会遇到这个问题。
EDIT2:我接受了 Roy J 的第二个答案，因为我觉得它最好地回答了问题，尽管它不是一个好的设计，但对于某些人来说可能是一个有效的解决方案。然而，在我的实际实现中，我使用了 Roy J 第一个答案，任何阅读这个问题的人可能也应该这样做(我还设法将 inner 添加到 outer 的模板中，以避免使用应用程序)。
最佳答案
由于您无法使用 ref 的唯一原因是它是在父级中定义的，因此您可以转到 $parent 并使用其refs。请注意，这使得 outer 依赖于(纠缠)inner 的结构以及是否存在 ref 来获取它。这是糟糕的设计，但它是对代码进行的最小更改，您必须让它完成您想要做的事情。
const inner = Vue.component('inner', {
template: `
<div>
<span hidden="true"><slot></slot></span>
<input v-model="searchText" />
</div>
`,
props: ['placeholder'],
data: function() {
return {
searchText: this.placeholder
}
}
});
const outer = Vue.component('outer', {
template: `
<div>
<h3 v-on:click="testos">Hello: {{ client_id }}</h3>
<slot></slot>
</div>
`,
data: function() {
return {
client_id: ''
}
},
methods: {
testos: function() {
this.client_id = this.$parent.$refs.testref.searchText;
console.log('method', this.client_id);
}
}
})
new Vue({
el: '#app',
components: {
'inner': inner,
'outer': outer
}
})<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
<outer>
<div>
<form>
<inner ref="testref"></inner>
</form>
</div>
</outer>
</div>关于javascript - VueJS 组件 ref 在所有阶段都是未定义的，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53820217/