vue 公用页面引用_vue组件（将页面公用的头部组件化）

60 阅读 0 评论 40 点赞

我是靠谱客的博主重要钢铁侠，最近开发中收集的这篇文章主要介绍vue 公用页面引用_vue组件（将页面公用的头部组件化），觉得挺不错的，现在分享给大家，希望可以做个参考。

呃……重新捡起前面用vue-cli快速生成的项目。

之前是做过一个多页面的改造，以及引入vux的ui组件，这次在这个项目的基础上，再来聊聊vue中的component。

别问我为啥总是写关于vue的博客，都是为了生计(………………)

关于一些组件的概念之类的就不一一介绍了，官方文档说的很详细。

下面进入正题，直接下载项目

一拿出之前的项目

二在这种需求下，自然就要使用我们的组件了，在index.js中添加如下代码。

Vue.component('header-item', {

props: ['message', 'backUrl'],

template: `

})

//props用来传递数据

//template 一个html结构的模板

需要注意的是：因为在之前项目是用了vue路由，backUrl这个参数是个可以配置的路由，在实际项目中可以按照自己的需求去配置。

三在另外两个demo页面添加代码

demo1.vue中添加如下代码

demo2.vue中添加如下代码

四最后运行打开网页可以看到

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。