Как ссылаться на дочерние элементы в компоненте? - PullRequest
Новая
       8

Как ссылаться на дочерние элементы в компоненте?

0 голосов
/ 23 февраля 2019

Я пытаюсь построить родительско-дочернее дерево в Vue и хочу передать идентификатор DOM / элемента родителя дочернему, чтобы они могли к нему добавить.Вот простой пример того, что я пытаюсь достичь в качестве структуры DOM в браузере: 

<div id="my-id">
    <p>parent-comp header</p>
    <div id="my-id-child">
        <p id="my-id-child-content">child-comp content</p>
    </div>
    <p>parent-comp footer</p>
</div>

Единственный способ, которым я смог сделать это до сих пор, - это дублировать id в другойсвойство propid и передайте их обоим вниз по дереву.Это кажется грязным.Посмотрите мой пример кода: 

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

<parent-comp id="my-id" propid="my-id"></parent-comp>

<script type="application/javascript">
    Vue.component('parent-comp', {
        props: {
            propid: String
        },
        template: ` <div>
                        <p>parent-comp header</p><child-comp :id="propid + '-child'" :propid="propid + '-child'"></child-comp><p>parent-comp footer</p>
                    </div>`,
    });

    Vue.component('child-comp', {
        props: {
            propid: String
        },
        template: `<div>
                    <p :id="propid + '-content'">child-comp content</p>
                   </div>`,
    });

    new Vue({
        el: '#my-id'
    });
</script>
</body>
</html>

Я предполагаю, что должен быть лучший способ добиться этого?Кажется, это должно быть простой задачей?Спасибо.

1 Ответ

0 голосов
/ 26 февраля 2019

Действительно, есть лучшие способы ссылки на конкретные элементы в шаблоне текущего компонента: используйте ref s в шаблоне, что позволит вашему компонентному скрипту получать к ним доступ черезthis.$refs: 

<template>
  <div>
    <button ref="myBtn">Click</button>
  </div>
</template>

<script>
export default {
  methods: {
    doFoo() {
      console.log(this.$refs.myBtn)
    }
  }
}
</script>

Изоляция объема поддерживается.Например, когда на странице имеется несколько экземпляров компонента A, и один из них получает ссылку на свою кнопку (через this.$refs.myBtn), чтобы отключить его, отключается только кнопка этого экземпляра.Все остальные A экземпляры не затрагиваются.

...