iis服务器助手广告广告
返回顶部
首页 > 资讯 > 精选 >vue如何实现自定义公共组件及提取公共方法
  • 777
分享到

vue如何实现自定义公共组件及提取公共方法

2023-06-30 17:06:33 777人浏览 薄情痞子
摘要

这篇“Vue如何实现自定义公共组件及提取公共方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue如何实现自定义公共组件及

这篇“Vue如何实现自定义公共组件及提取公共方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue如何实现自定义公共组件及提取公共方法”文章吧。

    自定义公共组件及提取公共的方法

    vue自定义公共组件

    我们在编写页面的时候,会存在公共的组件,比如头部和底部菜单

    我们拿公共头部为例子,想在每个页面都显示公共头部的实现方式有两种:

    在src/components目录创建目录 common, 再创建header.vue

    header.vue

    <template>  <div>  <h2>header in here</h2>  </div></template>
     <script>  export default{} </script>

    1.全局挂载组件

    在main.js里挂载

    import headerTop from "xxx/components/common/header" //引入组件//第一个参数表示 head-view标签的内容都用第二个参数headerTop来代替 Vue.component("head-view",headerTop); //然后在需要使用的vue文件中引入头部的话,只需要加入 <head-view></head-view>标签//

    组件局部引入,需要用的时候才引入使用

     //在需要使用的VUE文件中引入头部: <template> <headerTopNav></headerTopNav> </template>
     <script>import headerTopNav from 'xxx/components/common/header' //引入组件 export default{ components: {headerTopNav} //表示headerTopNav标签的内容被headerTopNav组件代替 } </script>

    vue 提取公共的方法

    创建文件夹 以及 JS文件 用来存放公共的方法 

    vue如何实现自定义公共组件及提取公共方法

    vue如何实现自定义公共组件及提取公共方法

    common.js 文件中内容如下

    const commonData = () => {console.log('我是公共的方法')}export { commonData }

    全局使用:

    ① 在 main.js 文件中全局引入,并在 vue 的原型链 (prototype) 中注册

    // 引入 common.jsimport { commonData } from './utils/common.js'// 将 common 配置给 Vue 的 $common 成员Vue.prototype.$commonData = commonData

    然后在需要用到该方法的组件文件中使用,如下

    <template>  <div></div></template>
    <script>export default {  created() {    this.$commonData();  }};</script><style lang="less" scoped></style>

    ② 在需要用到该方法的组件文件中局部引用

    import { commonData } from '../utils/common.js'<script>export default {created() {    commonData();  }};</script>

    vue定义公用方法

    在src目录下新建common公用方法文件夹用于存放公用方法列表

    common下新建common.js

    该示例定义存、取、删cookie方法

    main.js中引入该文件,并将其添加到Vue原型链上

    import common from './common/common'Vue.prototype.$common = common  //其中$common就是调用时所使用的方法

    紧接着定义common.js中的方法,录入即用

       export default { //公开        setCookie(name, value, day) {        let date = new Date();        date.setDate(date.getDate() + day);        document.cookie = name + '=' + value + ';expires=' + date;    },        getCookie(name){        let reg = RegExp(name + '=([^;]+)');        let arr = document.cookie.match(reg);        if (arr) {            return arr[1];        } else {            return '';        }    },        delCookie(name) {        setCookie(name, null, -1);    }}

    使用:

    在需求页面打印 this.$common

    打印结果是这样的就说明方法添加成功了,如果想要添加其他的方法也可以通过这样的形式在原型链上新增方法

    vue如何实现自定义公共组件及提取公共方法

    要使用则是:

    this.$common.setCookie('cookieName',存入字符串,天数) //存cookiethis.$common.getCookie('cookieName') //取this.$common.delCookie('cookieName') //删除

    更新:

    若是想将其直接定义为全局,且在this指向下,可以这样做: 

    首先依旧是定义你想要作为公用的方法

    function setCookie(name, value, day) {  let date = new Date();  date.setDate(date.getDate() + day);  document.cookie = name + '=' + value + ';expires=' + date;};function getCookie(name) {  let reg = RegExp(name + '=([^;]+)');  let arr = document.cookie.match(reg);  if (arr) {    return arr[1];  } else {    return '';  }};function delCookie(name) {  setCookie(name, null, -1);};

    然后:

    将方法注册,并添加到Vue的原型链

    export default {  install(Vue,opeions){    Vue.prototype.getCookie = getCookie;    Vue.prototype.setCookie = setCookie;    Vue.prototype.delCookie = delCookie;  }};

    注:注册之后需要在main.js引入并use才能生效

    import commonapi from './util/common' //你的公用方法文件路径Vue.use(commonApi)

    以上就是关于“vue如何实现自定义公共组件及提取公共方法”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网精选频道。

    --结束END--

    本文标题: vue如何实现自定义公共组件及提取公共方法

    本文链接: https://www.lsjlt.com/news/330307.html(转载时请注明来源链接)

    有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

    本篇文章演示代码以及资料文档资料下载

    下载Word文档到电脑,方便收藏和打印~

    下载Word文档
    猜你喜欢
    • vue如何实现自定义公共组件及提取公共方法
      这篇“vue如何实现自定义公共组件及提取公共方法”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue如何实现自定义公共组件及...
      99+
      2023-06-30
    • vue实现自定义公共组件及提取公共的方法
      目录自定义公共组件及提取公共的方法vue自定义公共组件vue 提取公共的方法vue定义公用方法自定义公共组件及提取公共的方法 vue自定义公共组件 我们在编写页面的时候,会存在公共的...
      99+
      2024-04-02
    • Vue公共方法怎么实现
      这篇文章主要介绍“Vue公共方法怎么实现”,在日常操作中,相信很多人在Vue公共方法怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue公共方法怎么实现”的疑惑有所帮助!接下来,请跟着小编一起来学习吧...
      99+
      2023-07-06
    • Vue组件公用方法提取mixin实现
      目录一.应用场景二.实现方法1.提取js共用方法文件2.引入三.注意事项一.应用场景 多个组件共用一个方法时可以用 mixin 抽取到一个js文件中,作为共用方法 二.实现方法 1....
      99+
      2024-04-02
    • vue中如何封装echarts公共组件
      这篇文章主要讲解了“vue中如何封装echarts公共组件”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中如何封装echarts公共组件”吧!定义图表公共样式是为了统一同一网站各页面图...
      99+
      2023-06-30
    • 浅析Vue公共方法的实现方法
      Vue是一款流行的JavaScript框架,开发者可以使用这个框架来快速构建用户界面。在Vue中,公共方法是非常重要的组成部分。本篇文章将介绍Vue公共方法。在Vue中,公共方法可以是全局方法或实例方法。全局方法是挂载在Vue对象上的方法,...
      99+
      2023-05-14
    • vue3.0公共组件自动导入的方法实例
      一、前提 我们使用的是require.context方法导入,在vite创建的项目内使用会报错"require not found",所以必须用webpack创建项目。或者有大能可...
      99+
      2024-04-02
    • vue如何使用vueslot封装公共组件
      目录使用vue slot封装公共组件使用slot插槽封装使用vue slot封装公共组件 公用子组件:publicSlot       <div>         <...
      99+
      2024-04-02
    • MybatisPlus如何实现公共字段自动赋值
      这篇文章主要讲解了“MybatisPlus如何实现公共字段自动赋值”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“MybatisPlus如何实现公共字段自动赋值”吧!1 mybatis-plu...
      99+
      2023-07-02
    • SpringBoot公共页面抽取方法实现过程介绍
      目录1. 需求描述2. 使用 thymeleaf 抽取公共页面方法3. insert与replace及include抽取公共页面的区别1. 需求描述 我们有这样一个页面,其具有左侧导...
      99+
      2024-04-02
    • Mybatis-Plus实现公共字段自动赋值的方法
      目录1 mybatis-plus实现自动填充指定字段1.1 需要修改的字段在模型类上添加1.2 新建一个MetaObjectHandler的实现类2 通用字段自动填充的最佳实践总结2...
      99+
      2024-04-02
    • vue实现公共组件传值并及时监听到数据更新视图
      目录vue公共组件传值及时监听到数据更新视图场景vue组件传值的几种方式父传子子传父非父子组件传值总结vue公共组件传值及时监听到数据更新视图 场景 AB两个子组件在 父页面中,(我...
      99+
      2023-01-13
      vue公共组件传值 监听数据更新视图 vue更新视图
    • SQL语句中如何实现公共字段的自动填充方法
      这篇文章主要介绍了SQL语句中如何实现公共字段的自动填充方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1. 前言我们在设计数据库的时候一...
      99+
      2024-04-02
    • vue如何在main.js中配置全局的通用公共组件
      目录在main.js中配置全局的通用公共组件vue.js全局组件的三种方式全局组件第一种方式,单引号(或双引号)第二种方式反引号第三种方式外部ID总结在main.js中配置全局的通用...
      99+
      2023-01-13
      vue main.js main.js配置公共组件 全局通用公共组件
    • Vue如何实现自定义铃声提示音组件
      小编给大家分享一下Vue如何实现自定义铃声提示音组件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!组件的使用安装npm i easy-ring...
      99+
      2023-06-28
    • Vue组件公用方法提取mixin的示例分析
      这篇文章给大家分享的是有关Vue组件公用方法提取mixin的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一.应用场景多个组件共用一个方法时可以用 mixin 抽取到一个js文件中,作为共用方法二.实现方...
      99+
      2023-06-29
    • SpringBoot调用公共模块的自定义注解失效如何解决
      这篇文章主要讲解了“SpringBoot调用公共模块的自定义注解失效如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“SpringBoot调用公共模块的自定义注解失效如何解决”吧!调用公...
      99+
      2023-06-29
    • VUE自定义取色器组件的实现
      本文主要介绍了VUE 自定义取色器组件的实现,分享给大家,具体如下: 效果: 功能: 1。点击色块中任何一点,色块中的正方形显示该点的颜色。 2。点击色块上方的颜色圆点,色块选中该...
      99+
      2024-04-02
    • Vue自定义Form组件实现方法介绍
      目录1. 需求分析2. 表单功能的简单实现3. 抽象验证规则4. 支持 v-model 双向绑定5. 使用 $attrs 支持默认属性6. 父组件调用子组件中的方法1. 需求分析 我...
      99+
      2022-11-13
      Vue自定义Form组件 Vue Form组件 Vue Form
    • Vue自定义铃声提示音组件的实现
      目录背景/前言组件的使用安装加载组件生效组件参数使用默认音效关于open参数的解释项目地址背景/前言 之前的一个功能需求,需要在页面接收消息,一旦有了新消息之后,需要用铃声进行提醒。...
      99+
      2024-04-02
    软考高级职称资格查询
    编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
    • 官方手机版

    • 微信公众号

    • 商务合作