养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

vue项目中怎样编写组件,import组件

时间:2024-10-07 18:20:20

现螅岔出礤在使用vue开发项目都是把对应的代码封装抽离,下次直接复制就可以。今天小编我就来分享一下vue项目中编写组件,import组件的经验。

工具/原料

vue项目

visualstudiocode

方法/步骤

1、首先,新建一个饱终柯肢.vue结尾的文件,然后里面照着写,分别有template,script,style。这样一个基本的组件形状就大概是这样了。

vue项目中怎样编写组件,import组件

2、当然也可以用jsx写法,不过只有非常熟练的我才建议用这种写法。

vue项目中怎样编写组件,import组件

3、然后随便添加内容,这里我就用最简单的123来演示。加完内容保存,一个最简单的组件就写好了。

vue项目中怎样编写组件,import组件

4、然后找到另外的组件,开始在页面引入。如图,用import变量名from路径即可引入。然后在components里面注册一下。

vue项目中怎样编写组件,import组件

5、这样即可在需要的页面中使用了,使用方法,用-分隔开,小写。

vue项目中怎样编写组件,import组件

6、然后启动对应的vue项目,在浏览器中查看对应的页面即可看到使用成功了。

vue项目中怎样编写组件,import组件

© 一点知识