Vue开发学习笔记:Vue使用自定义组件

局部注册

1.在components文件夹下新建一个tabs文件夹;同时新建四个文件

Vue开发学习笔记:Vue使用自定义组件

2.在Tabs.vue中引用HTML、JS、CSS文件

Vue开发学习笔记:Vue使用自定义组件

其中HTML文件随便写一些内容用于测试

Vue开发学习笔记:Vue使用自定义组件

 

3.在需要引用的该组件的地方(其他组件)对应的js文件中import该组件并注册

Vue开发学习笔记:Vue使用自定义组件

 

4.使用组件

Vue开发学习笔记:Vue使用自定义组件

 

5.效果图

Vue开发学习笔记:Vue使用自定义组件

 

全局注册

1.在components文件夹下新建一个tabs文件夹;同时新建五个文件

Vue开发学习笔记:Vue使用自定义组件

2.在Tabs.vue中引用HTML、JS、CSS文件

Vue开发学习笔记:Vue使用自定义组件

其中HTML文件随便写一些内容用于测试

Vue开发学习笔记:Vue使用自定义组件

3.在新建的index.js文件中实现install方法

Vue开发学习笔记:Vue使用自定义组件

4.在main.js文件中引用组件并使用Vue.use()方法可以调用install方法,会自动阻止多次注册相同插件

Vue开发学习笔记:Vue使用自定义组件