Javascript 如何访问Vue.js中功能组件模板中的原生HTML元素？

我正在尝试使用Vue.js 2.6创建一个自定义复选框组件。我想使它成为无状态的，因此它将值作为一个道具，并在用户输入上为父组件创建事件，而不保存任何数据本身

这是我的单文件组件（简化）：

父组件：

<template lang="pug">
form
  checkbox(:value="value" @input="value = $event")
  //-checkbox(v-model="value") - also should work
</template>

那么，有没有一种方法可以访问一个原生HTML元素，在一个功能组件模板中创建一个附加到它的事件处理程序中的事件？我已经搜索了这个主题的文档，但没有找到多少

---

或者在这种情况下我应该只使用有状态组件吗？

可以，但不是以预期的方式。问题在于功能组件将其引用传递到树上。因此，您的ref“输入”将出现在包含功能复选框的组件中。如果您尝试在功能组件上使用模板附加ref，它将失败

因此以下内容将不起作用（在父组件中），ref“check”将不存在。但如果您选中多个复选框，ref‘input’将至少是最后一个

<form>
    <functional-checkbox ref="check" :value="myValue" @input="myValue = $event"/>
</form>

如果您对该渲染函数的具体实现方式感兴趣，可以在此处进行更详细的查看

---

您不能在模板内部使用

$refs

。将所有逻辑移到组件声明中的方法中。

$event.target.checked

应在任何

v-on

handler@Ohgodwhy但是如何在函数组件的方法中访问$refs？@Phil但是在这个例子中我得到了

TypeError:“\u vm.$event未定义”

错误。您能举例说明一下如何使用它吗？

<template lang="pug">
form
  checkbox(:value="value" @input="value = $event")
  //-checkbox(v-model="value") - also should work
</template>

<script lang="ts">
import Vue from 'vue';
import { default as Checkbox } from './checkbox.vue';

export default Vue.extend({
  components: {
    checkbox: Checkbox,
  },
  data() {
    return { value: false };
  },
});
</script>

TypeError: "_vm.$refs is undefined"

<form>
    <functional-checkbox ref="check" :value="myValue" @input="myValue = $event"/>
</form>

<form>
    <functional-checkbox :value="myValue" @input="myValue = $event"/>
</form>

// later in code (assuming functional-checkbox has ref="input" defined inside)
this.$refs.input // will have a value, when the component is _mounted_

<template functional>
    <label>
        <input type="checkbox" :checked="props.value"
               @input="listeners.input && listeners.input($event.target.checked)">
    </label>
</template>

var render = function(_h, _vm) {
  var _c = _vm._c
  return _c("label", [
    _c("input", {
      attrs: { type: "checkbox" },
      domProps: { checked: _vm.props.value },
      on: {
        input: function($event) {
          _vm.listeners.input && _vm.listeners.input($event.target.checked)
        }
      }
    })
  ])
}