php 载入组件的方式,vue.js中怎么引入组件

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

7ff061a42308ae58df6e55c9c27d35ce.png

具体步骤如下:

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

71d513c5bfb9eb821b2c9a3dcf657dfd.png

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

cc7ee4a20206ed6dd7b0be62d698c294.png

3、接着在index.vue中引入table.vue模块//index.vue 页面 ,引入v-table模块

//这就是你引入的自定义模块;注意是驼峰命名法

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

import vTable from '../../components/common/table' //table.vue(注意,我在index.vue页面中添加了模块,不是html标签,其实就是vue引入新的子组件)

export default {

name: "index",

components: {

vTable

},

}

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

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

比如:

d7598590e6f91d0394b121631f695fce.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值