Vuejs如何在子组件中使用Vue-slick？

Posted 2023-02-23

【中文标题】Vuejs如何在子组件中使用Vue-slick？

【英文标题】：Vuejs how to use Vue-slick in childs component?

【发布时间】：2020-01-20 01:51:03

【问题描述】：

我需要在我的站点中使用多个滑块，我通过将 Vueslick 一个一个导入子组件来完成，但我只想导入一个 Slick 库，这是我的想法：

<pre><code>
<template>
  <div>
   <slider :slickOptionsSlider='slickOptionsSlider'></slider>
   <blogsuckhoe :slickOptionsBlogsuckhoe='slickOptionsBlogsuckhoe' ></blogsuckhoe>
 </div>
</template>

<script>
  data() 
    //import slick và child component
    return 
      slickOptionsSlider: 
        autoplay:true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        dots:false,
        arrows:false,
      ,
      slickOptionsBlogsuckhoe: 
        autoplay:true,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        dots:false,
        arrows:false,
      ,
    ;
  
</script>
</code></pre>

当然，它不起作用。你能帮助我吗 ？谢谢你 。对不起我的英语不好。

【参考方案1】：

您可以将其注册为全局组件。

app.js

Vue.component('vue-slick',require('vue-slick').default);

然后在根元素内、组件内或直接在刀片模板中使用它。

SomeComponent.Vue

<vue-slick :options='options'></vue-slick>

some.blade.php

<vue-slick :options='@json($options)'></vue-slick>

【讨论】：

但我在其他网站不需要它。我正在使用 Vue 路由器，我可以在父组件中使用它吗？

我不知道。 vuejs.org/v2/guide/components-registration.html您能否创建一个单独的文件（例如 yoursite.js），在其中放置特定于站点的资源，然后仅在该站点上加载已编译的脚本？