Vue.js 获取组件中的元素

Question

我有一个组件，如何选择其中一个元素？

我正在尝试获取此组件模板中的输入。

可能有多个组件，因此 querySelector 必须只解析组件的当前实例。

 Vue.component('somecomponent', {
    template: '#somecomponent',
    props: [...],

   ...

    created: function() {
        somevariablehere.querySelector('input').focus();
    }
});

原文由 Snewedon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据您要访问的内容，有几个选项：

• 您可以使用 this.$children 访问 Vue.js 组件的子组件

• 您可以使用 ref="uniqueName" 标记模板中的特定 DOM 元素，稍后通过 this.$refs.uniqueName 参考这些元素

（但请记住，在组件/应用程序 完成安装 并执行初始渲染之前，您将无法引用这些内容）

• 如果您无法标记您的元素，您可以通过 this.$el.querySelector('.myClass > .childElement') 使用 CSS 选择器查询 DOM 的子元素

（如上，组件/应用程序需要 完成安装）

你也可以通过在你的组件中做一个简单的 console.log(this) 来探索，它会显示你的 Vue 组件实例的所有属性。

原文由 vbranden 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Vuejs 2

v-el:el:uniquename 已被替换为 ref="uniqueName" 。然后通过 this.$refs.uniqueName 访问该元素。

原文由 tariqdaouda 发布，翻译遵循 CC BY-SA 4.0 许可协议