vue全局组件注册、局部组件注册、全局方法注册

更新日期: 2019-11-11 阅读: 2.9k 标签: 组件

一、全局组件注册有两种方法:

1、在main.js文件中引入组件:

import UserData from './components/UserData.vue' 
Vue.component('UserData',UserData)

就可以直接在vue文件中使用

<user-data></user-data>

2、新建一个userdata目录 下面有一个index.vue和index.js文件

index.vue文件 是常规的vue文件

index.js文件注册该组件:

import index from './index.vue'
const indexLists = {
    install: function(Vue) {
        // 注册并获取组件,然后在main.js中引用,在Vue.use()就可以了
        Vue.component('indexLists', index)
    }
}
export default indexLists

在main.js使用并注册:

import userdata from '@/components/index.js'
Vue.use(userdata);


二、局部组件注册:

<template>
<div>
//组件使用
<user-data></user-data>
</div>
</template>
<script>
import UserData from './components/UserData.vue' // 组件引入
export default {
name:'test',
components:{
UserData //组件注册
}
}
</script>


三:全局方法注册:

在目录下面建立一哥common.js文件:

const obj={
    fun(){
     console.log('hello word')
    }
}
export default obj

import comm form './common.js'

Vue.protopyte.$common = comm

this.$common.fun1() // hello word

全局组件:注册之后可以直接在vue文件中使用,但是不太安全,而且会增大文件体积

局部组件:使用之前需要注册

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/6808

相关推荐

vue重新渲染组件(重置或者更新)

当数据通过异步操作后,对之前加载的数据进行变更后,发现数据不生效。A组件或者B组件触发数据更新,C组件数据更新了,但是C组件仍显示上一次数据。

Vuetify基于vue2.0,为移动而生的组件框架

Vuetify 支持SSR(服务端渲染),SPA(单页应用程序),PWA(渐进式Web应用程序)和标准HTML页面。 Vuetify是一个渐进式的框架,试图推动前端开发发展到一个新的水平。

React高阶组件中使用React.forwardRef的技巧

之前使用React.forwardRef始终无法应用于React高阶组件中,关键点就是React.forwardRef的API中ref必须指向dom元素而不是React组件。codepen实例请划到底部。

Vue使用Props绑定Object并且传参

通过Props 给子组件传变量,变量是对象时,子组件无法在首次打开时获取到传入对象数据,并且在父组件中改变对象的属性,子组件也是无法监听

Vue中插槽的作用_Vue组件插槽的使用以及调用组件内的方法

通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数,slot的使用就像它的名字一样, 在组件内定义一块空间。在组件外, 我们可以往插槽里填入任何元素。slot-scope的作用就是把组件内的数据带出来

React Hook父组件获取子组件的数据/函数

我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用。文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hook的讲的太少

使用Vue 自定义文件选择器组件

文件选择元素是web上最难看的 input 类型之一。它们在每个浏览器中实现的方式不同,而且通常非常难看。这里有一个解决办法,就是把它封装成一个组件。

element-ui 的隐藏滚动组件el-scrollbar

为什么要用el-scrollbar,大家都知道,模拟一个滚动不难,而且市面上有很多这样的库。我考虑的,首先项目用的框架是Vue,然后用的组件库是Element,Element官网也有很多滚动

vue中prop属性传值解析

prop的定义:在没有状态管理机制的时候,prop属性是组件之间主要的通信方式,prop属性其实是一个对象,在这个对象里可以定义一些数据,而这些数据可以通过父组件传递给子组件。 prop属性中可以定义属性的类型,也可以定义属性的初始值。

写一个vue组件库_跟着element学习写组件

组件以插件的形式引入使用,当然,也可以直接在页面引入组件文件,两者按需使用。通过源码可知,vue不会重复安装同一个插件。以第一次安装为准,现在,可以在代码中使用组件啦~

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!