我有一个组件,如何 Select 其中一个元素?

我正在try 获取此组件模板中的输入.

可能有多个组件,所以querySelector必须只解析组件的当前实例.

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

   ...

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

推荐答案

根据您试图访问的内容,有几个选项:

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

  • You can label specific DOM elements inside your template using ref="uniqueName" and refer to these later via this.$refs.uniqueName
    (but remember that you won't be able to refer to these until the component/app has finished mounting and performed an initial render)

  • If you're unable to label your elements, you can query the DOM for child elements using a CSS selector via this.$el.querySelector('.myClass > .childElement')
    (as above, the component/app needs to have finished mounting)

您还可以在组件内部进行简单的console.log(this)次探索,它将向您展示Vue组件实例的所有属性.

Vue.js相关问答推荐

如何禁用Vuetify v—stepper操作按钮

使用计算(computed)属性更改视图

云Firestore保存额外的用户数据

VueJS - 将单独的组件加载到 vue 实例中

如何使用 vue.js 获取本地 html 文件?

Vue:如何将 store 与组件一起使用?

使用 Vue 和 JS 下载 CSV 文件

使用 vue.js 的 axios 预检失败错误 301

单击链接会更改 url,但不会更改页面上的内容/数据

如何使表格行可点击并展开行 - vue.js - element-ui

如何在某些路由上隐藏全局组件(例如导航栏)?

Proxy代理在 Vue 3 的控制台中是什么意思?

如何异步验证 Vuetify 文本字段?

如何告诉 Vue-cli 我的应用程序的入口点在哪里?

如何从方法内部访问数据

VueJS 路由 - 使用子路由和 Vuetify 时如何停止多个活动路由(active routes)?

Vue组件如何命名

将 Vue props与默认值合并

如果通过 jquery 更新,Vuejs 绑定不起作用

Vue.js 显示空格(换行符)