Vuejs2 我能'；无法使用$refs获取表单元素

我无法获取表单元素。我试图显示此。$refs，但此。$refs是空对象（{}）。怎么了

<template>
    <view>
    // some view
    </view>
    <view>
         <form ref="myForm" v-on:submit:prevent="getFormId" report-submit>
         </form>
    </view>
</template>
<script>
    data() {
        return {
        }
    },
    mounted() {
        console.log(this.$refs);
        console.log(this.$refs.myForm);
    }
</script>

//一些看法
数据（）{
返回{
}
},
安装的（）{
console.log（这是$refs）；
log（this.$refs.myForm）；
}

结果如下。 {}

---

未定义的

您只能访问组件的直接子级。如果您试图访问的ref位于另一个组件内，它将无法工作。您必须访问

组件上的ref。

有时我注意到使用连字符和区分大小写的ref的问题。如果将其称为

this.$refs['myForm']

，如果返回一个数组，则在末尾添加

[0]

，会发生什么。或者只需将ref更改为

表单

。但是，如果您试图获取表单中的所有值，这是不正确的

<template>
    <form @submit:prevent="submit">
        <input type="text" v-model="name" required autofocus>
        <input type="email" v-model="email" required>
        <button type="submit">Submit</button>
    </form>
</template>
<script>
exports default {
    data() {
        return {
            name: '',
            email: '',
        }
    },
    methods: {
        submit() {
            console.log({name: this.name, email: this.email });
        }
    },
};
</script>

提交
导出默认值{
数据（）{
返回{
名称：“”，
电子邮件：“”，
}
},
方法：{
提交（）{
log（{name:this.name，email:this.email}）；
}
},
};

您可以使用v-model进行表单元素的双向绑定。为什么需要获取表单？模板有两个根

元素。我正在尝试获取表单元素并触发submit事件并获取表单的formId（report submit用于获取formId），您能详细解释一下吗？抱歉，我无法获取。显示的代码没有引用。我正在尝试获取表单元素并触发提交事件并获取表单的formId（report submit用于获取formId）