Как инициализировать корневой элемент dom компонента в Vue

Question

В React использование функции стрелки дает хитрость

class AppComponent extends Component {

  componentDidMount() {
    this.createAppComponent()
  }

  createAppComponent() {
    const node = this.node

  }
  render() {
    return <div ref={node => this.node = node}></div>
  }
}

Как я могу инициализировать то же свойство node в компоненте Vue?

Answer 1

В Vue вы используете $el из ref, чтобы получить базовый элемент DOM.

<my-widget ref='theWidget' />

mounted() {
   const theElement = this.$refs.theWidget.$el
}

Другие комментарии

Если вы определите ref в цикле, то theWidget будет массивом.

Если «компонент» является просто элементом HTML (например, div или input), $el будет неопределенным, поскольку «theWidget» будет ссылкой на компонент.