Vue 开发学习(持续更新)

最新推荐文章于 2024-12-17 17:47:08 发布

原创最新推荐文章于 2024-12-17 17:47:08 发布 · 354 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

24 篇文章

订阅专栏

前端知识

14 篇文章

订阅专栏

本文详细介绍Vue中全局函数配置、全局组件引入的方法，以及如何在独立JS文件中调用Vuex，涵盖从组件注册到全局函数定义的全过程。

Vue 开发学习(持续更新)

全局函数配置

全局组件引入

在app.js 下面注册组件

import User from ‘./components/Users’

Vue.components(“users”,Users)

类似这样

// 组件引入
import ToastTitle from "./components/toastTitle/index";
import Vue from 'vue';

// 注册全局组件
Vue.component("ToastTitle", ToastTitle)

然后可以在任何页面调用

<ToastTitle></ToastTitle>

如何在单独的JS 文件调用Vuex

在需要引用的JS文件调用store就也跨一了,store.commit(‘时间名称’)

import store from './store.js';

console.log(store.state);
store.commit('xxx');

全局函数

有时候我们对于一些放在HTML的全局函数,我们不想在每个.vue文件里面引用,我们可以在

app.vue里面去定义一个全局通用函数,调用起来的就直接用就可以了

例如:

<div @click = "gobalClick"> 
    
</div>

main.js

Vue.prototype.inputBack = function () {
  setTimeout(() => {
    const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
    window.scrollTo(0, Math.max(scrollHeight - 1, 0));
  }, 100);
}

就类似于上面,定义葛vue全局属性,属性里面包含一个全局函数,当vue页面上面需要调用的时候,就直接用函数名称调用