如何在小vue中获取$el

Question

从叶柄回购内部的示例中可以看出：

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  createApp({
    // exposed to all expressions
    count: 0,
    // getters
    get plusOne() {
      return this.count + 1
    },
    // methods
    increment() {
      this.count++
    }
  }).mount()
</script>

<div v-scope>
  <p>{{ count }}</p>
  <p>{{ plusOne }}</p>
  <button @click="increment">increment</button>
</div>

当我试图得到这样的p标记时：

<p ref="foobar">{{ count }}</p>

这将返回一个错误，因为this.$refs.foobar是undefined

increment() {
  console.log(this.$refs.foobar.$el)
  this.count++
}

如何通过$el获取javascript中的HTML元素

Answer 1

感谢@kissu为我指出了正确的讨论形式，在那里我找到了答案。

因此，显然$refs只在小vue中的“组件”概念中工作。

如果您有以下的文档片段，那么在p标记中添加一个p：

<script type="module">
  import { createApp } from 'https://unpkg.com/petite-vue?module'

  function Counter(props) {
    return {
      count: props.initialCount,
      inc() {
        this.count++
      },
      mounted() {
        console.log(`I'm mounted!`)
      }
    }
  }

  createApp({
    Counter
  }).mount()
</script>

<div v-scope="Counter({ initialCount: 1 })" @vue:mounted="mounted">
  <p ref="foobar">{{ count }}</p>
  <button @click="inc">increment</button>
</div>

你就能做到：

从该函数中提取this.$refs.foobar，以获取元素。注意:不需要$el。