Как получить доступ к компоненту HTML в Vue вне тега шаблона? - PullRequest
Новая
       2

Как получить доступ к компоненту HTML в Vue вне тега шаблона?

0 голосов
/ 16 апреля 2020

Я знаю, что мы можем просто показать вывод компонента с <ComponentName/> внутри шаблона,

, но как нам получить доступ к выводу ComponentName html вне шаблона, как в data, * 1006? * или во время mounted

например, components/Test.vue

<template>
    <div>I'm a test</div>
</template>

в другом vue файле pages/ViewTest.vue

import Test from '~/components/Test.vue'
export default {
    components: {Test},
    data() {
        return {
            test: Test
        }
    },
    mounted: function()  {
      console.log( Test ) // Output is Test Component Object
      console.log( this.test ) // Output is Test Component Object
    }
}

Объект из вывода журнала консоли кажется, содержит много информации, и я даже вижу свойство render от объекта, хотя, когда я пытаюсь console.log( Test.render() ), это дает мне ошибку

Так что мой вопрос, как я могу получить <div>I'm a test</div> от вне шаблона?

Цените любую помощь или руководство

РЕДАКТИРОВАТЬ

Я использую vue -material-design-icons пакет для создания различных иконок SVG,

, и я могу использовать его, как показано ниже 

<template>
  <MapMarkerRadius/>
</template>
<script>
  import MapMarkerRadius from 'vue-material-design-icons/MapMarkerRadius'
  export default {
    components: {MapMarkerRadius}
  }
</script>

Теперь вот моя основная проблема, у меня есть этот компонент, который генерирует html

<template>
  <div :class="'card'">
    <div v-if="title" :class="'card-title'">
      {{ title }}
    </div> 
    <div :class="'card-content'">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: 'card',
  props: {
    title: {},
  }
};
</script>

Затем я использую этот компонент card, как этот, в другом файле vue 

<template>
  <card :title="'Title ' + MapMarkerRadius">
    Test Content
  </card>
</template>

<script>
import card from '~/components/Card'
import MapMarkerRadius from 'vue-material-design-icons/MapMarkerRadius'
export default {
  components: {card, MapMarkerRadius}
};
</script>

, и моя проблема здесь Если выход card title равен Title [object]

Ответы [ 2 ]

2 голосов
/ 16 апреля 2020

Попробуйте использовать ref в root компонента Test, например: 

<template>
  <div ref="test">I'm a test</div>
</template>

в другом компоненте: 

   mounted: function()  {
      console.log( this.$refs.test )
    }

Нет необходимости импортировать компонент .

0 голосов
/ 17 апреля 2020

Используемое хранилище - это однофайловые компоненты, которые генерируют html через один тег, поэтому использование 

import MapMarkerRadius from 'vue-material-design-icons/MapMarkerRadius'

позволит использовать его в шаблоне как <map-marker-radius/>

Вот почему добавление заголовка строки и объекта типа "My Icon"+MapMarkerRadius вернет литерал [object], как вы видели: "My Icon [object]"

У вас есть 3 варианта go через то, что вы want:

  1. Поиск других репозиториев, позволяющих легко использовать значки материалов другими способами;
  2. У вас есть доступ к компоненту card? Вместо имен svg или самого компонента вы можете использовать имена классов этого репозитория: https://github.com/robcresswell/vue-material-design-icons/issues/12, добавить имена классов в реквизит и добавить его в свой компонент: 
<card :title="'Title'" :icon_class="map-marker-radius">
    Test Content
</card>

<div v-if="title" :class="'card-title'">
      {{ title }} <div :class="icon_class"></div>
</div>

props: {
    title: {},
    icon_class: '',
}
Компонент MapMarkerRadius можно использовать непосредственно в компоненте card, но он появляется только в том случае, если для компонента card заданы определенные критерии, например:

main. vue

<template>
  <card :title="'Title'" :icon="true" :icon_typename="'map-marker-radius'">
    Test Content
  </card>
</template>

<script>
import card from '~/components/Card'
export default {
  components: {card}
};
</script>

с icon_typename в качестве любого имени / ключевого слова, которое вы хотите использовать.

карточка. vue

<template>
  <div :class="'card'">
    <div v-if="title" :class="'card-title'">
      {{ title }} <span v-if="icon_mmr"><map-marker-radius/></span>
    </div> 
    <div :class="'card-content'">
      <slot />
    </div>
  </div>
</template>
<script>
import MapMarkerRadius from 'vue-material-design-icons/MapMarkerRadius'
export default {
  name: 'card',
  props: {
    title: {},
    icon: { default: false },
    icon_typename: '',
    icon_mmr: false,
  },
  mounted(){
    if (this.icon && this.icon_typename === 'map-marker-radius') this.icon_mmr = true
},
  components: { MapMarkerRadius },
};
</script>

Код далек от совершенства, но вы можете go оттуда для дальнейшей оптимизации.

...