vue引入公共组件,vue中自定义组件
本文主要介绍了在vue中实现自定义公共组件和提取公共组件的方法，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
自定义公共组件和提取公共方法vue自定义公共组件vue提取公共方法vue定义公共方法
自定义公共组件及提取公共的方法
vue自定义公共组件
当我们写一个页面的时候，会有一些通用的组件，比如顶部和底部的菜单。
让我们以公共头文件为例。有两种方法可以在每个页面上显示公共页眉：
在src/components目录中创建common目录，然后创建header.vue
header.vue
模板
差异
h1此处的标题/h1
/div
/模板
脚本
导出默认值{}
/脚本
1.全局挂载组件
将它挂载在main.js中
“XXX/components/common/header”//import components中的标题顶部
//第一个参数表示head-view标签的内容全部被第二个参数headerTop替换。
Vue.component(head-view ，header top)；
//那么，如果你想把头引入到你需要使用的vue文件中，只需要添加head-view/head-view标签//
组件在本地引入，并且仅在需要时引入和使用。
//将头引入需要使用的VUE文件中：
模板
headerTopNav/headerTopNav
/模板
脚本
“XXX/components/common/header”//import components中的标题顶部导航
导出默认值{
Components: {headerTopNav} //指示headerTopNav标记的内容被headerTopNav组件替换。
}
/脚本
vue 提取公共的方法
创建文件夹和JS文件来存储公共方法。
common.js 文件中内容如下
const commonData=()={
Console.log(我是公共方法)
}
导出{ commonData }
全局使用：
全局引入main.js文件，注册在vue的原型链中。
//介绍common.js
从“”导入{ commonData }。/utils/common.js
//为Vue的$common成员配置common
vue . prototype . $ common data=common data
然后在需要该方法的组件文件中使用它，如下所示
模板
分区/分区
/模板
脚本
导出默认值{
已创建(){
这个。$ common data()；
}
};
/脚本
style lang=less 范围
/风格
需要使用该方法的组件文件中的本地引用。
从导入{ commonData }./utils/common.js
脚本
导出默认值{
已创建(){
common data()；
}
};
/脚本
vue定义公用方法
在src目录中创建一个新的公共方法文件夹来存储公共方法列表。
在common下，创建新的common.js
这个例子定义了存储、检索和删除cookie的方法。
该文件被引入main.js并添加到Vue原型链中。
从导入公用。/常见/常见
Vue.prototype.$common=common //其中$common是调用时使用的方法。
然后在common.js中定义方法，可以输入使用。
导出默认值{//public
/**
*设置cookie
**/
setCookie(名称，值，日期){
let Date=new Date()；
date . set date(date . getdate()day)；
document.cookie=name = valueexpires= date
},
/**
*获取cookie
**/
getCookie(名称){
让reg=RegExp(名为=([^；] ));
设arr=document . cookie . match(reg)；
如果(arr) {
return arr[1]；
}否则{
返回“”；
}
},
/**
*删除cookie
**/
delCookie(名称){
setCookie(名称，null，-1)；
}
}
使用：
打印这个。需求页面上的$common
打印结果是这样的，说明方法已经添加成功。如果要添加其他方法，也可以通过这种形式在原型链上添加方法。
要使用则是：
这个。$ common.setcookie (cookiename ，存储在字符串中，天数)//存储cookie
这个。$ common . get cookie( cookiename )//Take
这个。$ common . del cookie( cookiename )//delete
更新：
如果您想直接将其定义为全局的并指向它，您可以这样做：
首先依旧是定义你想要作为公用的方法
/**
*设置cookie
**/
函数setCookie(名称，值，日期){
let Date=new Date()；
date . set date(date . getdate()day)；
document.cookie=name = valueexpires= date
};
/**
*获取cookie
**/
获取cookie函数（名称)
设reg=RegExp(名称)));
设arr=document。饼干。匹配(注册):
if(arr)}
返回arr[1]；
}否则
返回""
}
}:
/**
*删除饼干！饼干
*/
德尔库奇(名称)函数
setcookie(名称，null，-1)；
}:
然后：美元
将方法注册，并添加到视图(视图)的原型链
导出默认值[
安装(视图，OPEX)}
查看。原型。getcokie=getcokie:
查看。原型。set book=set book
查看。原型。del cookie=del cookie:
}
}:
注：注册之后需要在手，js引入并用吧才能生效
汇入commonApi来自于./util/common //你的公用方法文件路径
查看。使用(通用API)
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。