Vue中引用公共方法和公共组件

最新推荐文章于 2022-11-04 11:40:38 发布

奥特蛋_mm

最新推荐文章于 2022-11-04 11:40:38 发布

阅读量1.1w

点赞数 3

分类专栏： vue项目实战经验

本文链接：https://blog.csdn.net/weixin_43254676/article/details/89556671

版权

vue项目实战经验专栏收录该内容

50 篇文章 6 订阅

订阅专栏

Vue中引用公共方法

1.在src新建commonFunction文件夹,再新建common.js
在这里插入图片描述
其中common.js中方法的声明和导出如下

2.在main.js中引用common.js，再使用Vue.prototype添加实例属性

3.应用

@click=“common.方法名”
在这里插入图片描述

Vue中引用公共组件

1.在src目录下的components文件夹下新建公共组件

在这里插入图片描述

2.在main.js中引用，这里需要引用并初始化组件三个步骤

import AreaSelect from '@/components/AreaSelect'
Vue.use(AreaSelect) // 引用自定义组件
Vue.component('area-select', AreaSelect) // 初始化组件
new Vue({
  el: '#app',
  components: {
    AreaSelect
  },
})

在这里插入图片描述

3.直接用 area-select 即可使用

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

奥特蛋_mm

关注关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue引入公共组件

weixin_43829905的博客

05-09

4638

Vue引入公共组件vue页面1需要引入子组件vue页面2子组件vue页面2内容为正常的vue页面，无需任何修改 vue页面1需要引入子组件vue页面2 1.在Vue页面1中添加 <template> <Header></Header>//直接引用（要添加的子组件vue页面2 ） </template> 2.在Vue页面1中添加 <scrip...

Vue中引入组件的步骤

热门推荐

qq_41497443的博客

07-16

1万+

公共组件使用场景：项目中若多个页面都显示有相同的区域内容，则该公共区域内容可以封装成公共组件进行使用

多个vue项目公共组件的三种方法

細水、長流√的专栏

11-04

4680

我们可以采取专人维护common包的方式，common的组件编写完成后，将其发布到npm。发布流程如下：在注http://www.npmjs.com册一个账号进入common的控制台，输入命令npm login，按照提示输入刚注册的账号密码输入命令 npm publish 即可当然common这个名字肯定被注册了，这里只做示例，真正使用时需使用一个未在npm中注册的包名。

浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法

11-20

1、在Vue项目中引用公共方法作为一个新人小白，在使用vue的过程中，难免会遇到很多的问题，比如某个方法在很多组件中都能用的上，如果在每个组件上都去引用一次的话，会比较麻烦，增加代码量。怎么做比较好呢，话不...

Vue一次性简洁明了引入所有公共组件的方法

10-17

本文将详细介绍一种Vue项目中一次性引入所有公共组件的方法。首先，公共组件是那些在多个页面或组件中复用的组件。例如，模态框、按钮、输入框等。在Vue中，我们通常通过import语句来引入一个或多个特定的组件，并...

解决vue项目中某一页面不想引用公共组件app.vue的问题

10-14

总的来说，要解决Vue项目中某一页面不想引用公共组件的问题，可以通过动态控制组件的`v-if`或`v-show`属性，结合路由信息来实现。同时，可以在组件内部监听路由变化，根据路由状态来决定组件的显示或隐藏，以满足...

vue学习笔记五：在vue项目里面使用引入公共方法详解

10-17

4. 在需要使用公共方法的Vue组件中，通过`this.$common`调用这些方法。通过这种方式，我们可以轻松地在Vue项目中实现代码复用，提高开发效率，同时保持代码的整洁和模块化。记住，合理地组织和使用公共方法能有效...

Vue3.0——数据仓库配置、Vue2.0 和 Vue3.0差异（面试题）、副作用函数

qq_52301431的博客

09-22

1298

自定义事件绑定的时候native修饰没有了，vue3.0希望自己去触发，3.2之前在组合式API中必须引入definrEmit使用，3.2是defineEmits也可以不引入直接使用选限售股hiAPI（3.3.3）直接使用this.$emitdefineAsyncComponent 异步组件，用法就是在2.0的基础上，用这个函数处理之后的返回值。

vue封装，调用公共方法

w_0217的博客

08-13

1060

vue封装，调用公共方法当遇到一个方法需要多次使用，但不可能每次都写一遍，这就需要封装一个方法，使用的时候调用一下就可以了封装公共方法 1.在vue项目中创建一个js文件 action.js 2.在main.js中实例化action.js文件 //引入公共方法 import common from './utils/action' Vue.use(common) 3.在action.js中写实例方法 export default{ install(Vue){ Vue.proto

Vue的依赖和注入

qq_42356513的博客

02-07

3749

前奏学习一个新的知识,应该带有一些目的性,或者了解一下相关背景,带着疑问去学一个东西,至少不会那么痛苦。(不要跟我说学习是快乐的,学习哪来的快乐(￣ー￣) (￣ー￣))。还是先看场景,比如A组件现在要传值给他的子组件B,B组件的孩子C组件也要用到这个值,C组件的孩子D组件也要用到这个值。那么你可以选择以下2种方式实现 1.使用props一级一级往下传 2.使用vuex 但是想想,是不是都有点麻烦？主题介绍一下Vue的依赖和注入。先看组件层级结构 A是B的爸爸,B是C的爸爸,C是D的爸爸 Vu

Vue:多个click事件；Vue:向组件传递多个@click

huangfuyk.的博客

04-20

4607

在做项目的过程中，我们会遇到多个点击事件同时执行的情况，本文将为大家介绍三种方法。第一种就是一个事件里执行多个方法 // 触发点击 @click = 'clickhandler' // 点击事件 clickhandler() { this.function1(); this.function2(); } 第二种就是多个事件里执行多个方法 // 触发点击 @click = 'clickMethods1(); clickMethods2()' // 点击事件 clickMethods.

vue中公共方法调用

一只程序媛

06-03

9334

首先，在assets文件夹下，新建js文件夹，创建common.js export default { text(){ console.log("测试，测试！！！") } } （1）如果是全局（多页面）使用： 1.在main.js中引入 /* 引入公共js*/ import common from '@/assets/js/common.js' Vue....

vue公共方法抽离

weixin_41770018的博客

07-11

8946

demo：制作一个点击按钮增加或者减少数字现在vue组件内部测试一下功能<template> <div class="all"> <p>还未抽离</p> <button @click="SubNum()">-</button> <input type="num

在vue中封装可复用的组件方法

weixin_42492399的博客

04-30

513

// 公共提示信息js import Vue from "vue"; import Toast from "./dialogMessage.vue"; //引入组件要使用这个组件 // 返回一个“扩展实例构造器” let ToastConstructor = Vue.extend(Toast); let myToast = (text, duration) => { let toastDom = new ToastConstructor({ el: document.createEl

Vue组件的三种调用方式

weixin_33730836的博客

01-14

3028

最近在写fj-service-system的时候，遇到了一些问题。那就是我有些组件，比如Dialog、Message这样的组件，是引入三方组件库，比如element-ui这样的，还是自己实现一个？虽然它们有按需引入的功能，但是整体风格和我的整个系统不搭。于是就可以考虑自己手动实现这些简单的组件了。通常我们看Vue的一些文章的时候，我们能看到的通常是讲Vue单文件组件化开发页面的。单一组件开发的文...

vue子组件引用过滤器公共方法报错

09-07

在Vue中，子组件引用过滤器公共方法时可能会出现报错。报错通常是因为子组件无法直接访问或使用父组件中定义的过滤器方法。解决这个问题的一种方式是将过滤器方法定义为全局过滤器，这样在任何组件中都可以使用。在Vue的入口文件(main.js)中使用Vue.filter()方法来定义全局过滤器，例如： ``` // 定义全局过滤器 Vue.filter('myFilter', function(value) { // ... }) new Vue({ // ... }) ``` 然后，在子组件中就可以直接使用这个全局过滤器了： ``` <template> <div> {{ someValue | myFilter }} </div> </template> ``` 另外，如果你希望在子组件中使用父组件中定义的过滤器方法，可以通过props将过滤器方法传递给子组件。在父组件中定义一个过滤器方法，并通过props传递给子组件，子组件可以使用传递过来的过滤器方法进行数据处理。父组件： ``` <template> <div> <child-component :filterMethod="myFilter"></child-component> </div> </template> <script> export default { data() { return { // ... } }, methods: { myFilter(value) { // ... } } } </script> ``` 子组件： ``` <template> <div> {{ someValue | filterMethod }} </div> </template> <script> export default { props: ['filterMethod'], data() { return { // ... } }, // ... } </script> ``` 通过上述方法，你可以在子组件中使用父组件中定义的过滤器方法进行数据处理，避免报错的问题。