Rumah >hujung hadapan web >View.js >vue.js中怎么引入组件

vue.js中怎么引入组件

王林
王林asal
2020-11-19 09:56:039094semak imbas

vue.js中引入组件的方法:1、创建自定义组件的文件夹;2、在要添加的页中加入要引入的模块;3、在index.vue中引入模块;4、在index.vue页面引入组件即可。

vue.js中怎么引入组件

具体步骤如下:

(相关视频推荐:jquery视频教程

1、首先在你的项目中专门创建一个放置自定义组件的文件夹(我是放在了components底下的common中,本文以table.vue为例)

dd32e43a69493a25a10a61bc409d26e.png

2、然后在你要添加的页中加入要引入的模块,注意驼峰命名的方式(本文为例:c8b0ad12d82535191e7fc6d061d1b4acff19bd231f34e648b0b099aa74724681,因为我在定义table模块的时候是定义name:v-table,所以引用的时候,也必须得用所在table模块中name定义的名字);

f7ff0e9cde4e9c05bda65929f057b84.png

3、接着在index.vue中引入table.vue模块 

//index.vue 页面 ,引入v-table模块
<div class="table">
    <v-table></v-table> //这就是你引入的自定义模块;注意是驼峰命名法
</div>

4、在index.vue页面引入该组件(注意:table.vue,我是在index.vue页面中添加了模块c8b0ad12d82535191e7fc6d061d1b4ac,不是html标签,其实就是vue引入新的子组件)

//index.vue
<script>
  import vTable from &#39;../../components/common/table&#39;  //table.vue(注意,我在index.vue页面中添加了模块<v-table>,不是html标签,其实就是vue引入新的子组件)
    export default {
        name: "index",
      components: {
            vTable
        },
    }
</script>

提示:说白了,自定义组件就好比封装,把一些公共的模块抽取出来,然后写成单独的的工具组件或者页面,在需要的页面中就直接引入即可。

另外,为了防止在同一页面写入过多的代码,不方便后期维护,便可以把整个页面分成多个小模块,然后在主页面进行模块引入,创建包括引入步骤都是一样的。

比如:

1f07043b86e57d5a2a1aad5b2d53518.png

相关推荐:vue.js教程

Atas ialah kandungan terperinci vue.js中怎么引入组件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:5个好用的Vue.js库推荐Artikel seterusnya:vue.js怎么部署到服务器上