Блог

Главная - Вопросы по программированию - Передача HTML-тега в vue js

Передача HTML-тега в vue js

#vue.js

Вопрос:

У меня есть компонент, внутри которого есть <p> тег, но хотелось бы, чтобы иногда это был <h1> тег, как передать реквизит ?

 <template>
 <p>Hello world</p>
</template>

Ответ №1:

Передайте его как реквизит, а затем используйте component для его визуализации :

 <template>
 <component :is="tag">Hello world</component >
</template>

<script>
export default{
  name:'MyComponent',
  props:['tag']
}
</script

затем используйте компонент, подобный <MyComponent tag="h1" />

Вы могли бы сделать MyComponent более динамичным прием любого контента, используя слоты :

 <template>
 <component :is="tag">{{msg}}</component >
</template>

<script>
export default{
  name:'MyComponent',
  props:['tag','msg']
}
</script

затем используйте его, как <MyComponent tag="h1" >hello world</MyComponent>

Комментарии:

1. привет, спасибо за ваш ответ ! это было не то, что я искал, я хотел бы иногда отображать тег p вместо тега h1 с тем же текстовым содержимым, я думаю, нам нужно выполнить условие if else

2. Вы могли бы сделать <MyComponent tag="p" />

Ответ №2:

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

 <template>
  <slot name="content"></slot>
</template>

Когда вы используете свой компонент, вы можете просто сделать это

 <Component>
  <template #content>
    Your content here, whatever you like
  <template/>
<Component/>

Комментарии:

1. привет, спасибо за ваш ответ, я думаю, что ваш ответ относится к реквизиту, не отображающему html-тег !

2. @fancy56 Нет, мой ответ-это правильный способ изменить содержимое компонентов, не создавая беспорядка

Метки: