Question

我正在努力争取Vue裁判。如果在主Vue实例的模板中定义它们，则它们可以正常工作，但如果在组件模板中定义它们，则不能。我在做什么错了？

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
  <div id="app"></div>
  <script src="main.js"></script>
</body>
</html>

main.js，版本1

const app = new Vue({
  el: '#app',
  template: `
    <div ref="divRef">
      <button ref="buttonRef">Submit</button>
    </div>
  `
});

结果（符合预期）

> app.$refs
> {buttonRef: button, divRef: div}

main.js，版本2

Vue.component('demo-page', {
  template: `
    <div ref="divRef">
      <button ref="buttonRef">Submit</button>
    </div>
  `
});

const app = new Vue({
  el: '#app',
  template: '<demo-page ref="componentRef"></demo-page>'
});

预期结果

> app.$refs
> {componentRef: VueComponent, buttonRef: button, divRef: div}

实际结果

> app.$refs
> {componentRef: VueComponent}

Answer 1

$refs在组件中作用域。因此，您只能在应用本身的componentRef中看到$refs。其他$refs可以在每个组件的范围内访问。因此，请尝试访问该组件范围内的$refs。

如果您在元素上也定义了属性{strong> ref 的情况下定义v-for，则this.$refs.refName将返回DOM元素数组。请记住，$refs与data属性不同，它们不是无反应。

另请参见具有子组件实例的documentation至$refs和属性documentation至ref=""。

Vue：为什么我不能在组件模板中使用引用？

1 个答案: