怎么写vue组件

1.分析：什么时候要写组件呢？

举例如下图，一个页面中被反复引用的东西，可以将它提取出来写成一个组件。

2.组件怎么写？

1.poolicy.vue文件(主页)

在首页导入写的子组件

注意：写js要记得写唯一标识name，vue里面的view也是加唯一标识类名。

代码语言：javascript复制

//注意引入的组件的方式，两句话：import 和 components:{}

//此处还需要注意组件的命名

2.listItem.vue(自己写组件)

//即这一块则为图片上画的红框框的那一个子组件。

//子组件添加for循环事件，数据是在index.js的 listItemData集合里面。

代码语言：javascript复制点击图标，出现一一对应的关系 （重点）

代码语言：javascript复制3.index.js(专门存放数据的文件夹)

//部分数据

代码语言：javascript复制export const listItemData = [{

title: '企业资助补贴类',

list: [

{

icon: '',

title: '落户与租房资助类',

url: '/pages/Policy/Policy/components/conItem.vue',

detail: `

加油皮卡丘

`

},

{

icon: '',

title: '落户与租房资助类',

url: '/pages/Policy/Policy/components/conItem.vue',

detail: `

加油皮卡丘

`

},

{

icon: '',

title: '落户与租房资助类',

url: '/pages/Policy/Policy/components/conItem.vue',

detail: `

加油皮卡丘

`

}

]

}];3.政策详情页怎么拿到index.js里面的数据？

1.使用了解构赋值

2.使用了富文本解析器

（不过使用它有个缺陷，将需要的文字复制到编辑器里面会出现缺漏问题，个人感觉不建议这样子用）

代码语言：javascript复制

4.个人总结

通过这次的页面编写，学会了写组件以及什么时候该写组件，点击一个图标对应不同的页面。