vue.js中怎么引入组件


当前第2页 返回上一页

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

1

2

3

4

//index.vue 页面 ,引入v-table模块

<div class="table">

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

</div>

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

1

2

3

4

5

6

7

8

9

10

//index.vue

<script>

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

    export default {

        name: "index",

      components: {

            vTable

        },

    }

</script>

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

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

比如:

1f07043b86e57d5a2a1aad5b2d53518.png

相关推荐:vue.js教程

以上就是vue.js中怎么引入组件的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

vue.js怎样刷新组件

vue.js能做pc端吗

vue.js中数据驱动是什么

vue.js循环引用组件报错怎么办

vue.js怎么获取某个dom元素的值

vue.js是mvvm框架吗

vue.js怎么用正则校验

vue.js有哪些ui框架?

5个很棒的vue.js项目模板

vue.js中的el什么意思

更多相关阅读请进入《vue.js》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...