Блог

Я создал базовый компонент Vue, который выглядит следующим образом.

 <template>
  <div class="example">
    /* here render the component or HTML passed by pluing */
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  name: 'Example',
});
</script>

 

Теперь мне нужно создать плагин, который будет отображать любой HTML или переданный компонент Example .Я знаю основной синтаксис плагинов и как их использовать в Vue, но не знаю, как выполнить эту задачу, так как я новичок Vue .

 export default {
    install(vue, opts){ 
      /* how to take the component or HTML and pass to `Example` Component */
    }
}
 

Мне нужно реализовать их в vue2.

Вы можете использовать a slot для отображения произвольного HTML-кода в любом из ваших компонентов.

Ваш Пример Компонента:

 <template>
  <div class="example">
    <slot />
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  name: 'Example',
});
</script>
 

Тогда используйте его вот так:

 <template>
  <example>
    <div>Render me inside the slot</div>
  </example>
</template>
 

И это приведет к следующему отображению HTML:

 <div class="example">
  <div>Render me inside the slot</div>
</div>
 

Затем в вашем плагине вы можете использовать свой пример компонента и передать ему любой html, который вы хотите

Обновление: вот как может выглядеть ваш плагин. Просто создайте глобальный компонент внутри него

 import Vue from 'vue'

const ExamplePlugin = {
  install(Vue){
    Vue.component('Example', {
      name: 'Example',
      template: '<div class="example"><slot /></div>'
    })
  }
}
 

Тогда вы сможете Vue.use(ExamplePlugin) , и Example компонент будет доступен по всему миру в вашем приложении