VUE注册全局组件和局部组件过程解析
这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
全局组件
第一步：在components文件夹下建立一个子文件Users.vue
<template>
<div class="users">
{{msg}}
</div>
</template>
<script>
export default {
name: 'users',
data () {
return {
msg: '用户名'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
第二步：在main.js中进行全局注册
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 全局配置组件第一步 Users是文件夹的名字
import Users from './components/Users'
Vue.config.productionTip = false
// 全局注册组件第二部 users是
Vue.component('users',Users)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
第三步：在对应的文件中引用
<template>
<div id="app">
<!-- <router-view/>是子路由视图 -->
<!-- <router-view/> -->
<p>{{title}}</p>
<users></users>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
title:"users是全局组件的实例化的名字"
}
}
}
</script>
<style>
</style>
局部组件
在components文件夹下新建一个子组件Users.vue文件，然后在对应的文件中引用
<template>
<div id="app">
<!-- <router-view/>是子路由视图 -->
<!-- <router-view/> -->
<p>{{title}}</p>
<users></users>
</div>
</template>
<script>
/*局部注册组件*/
import Users from './components/Users'
export default {
name: 'App',
data(){
return{
title:"users是全局组件的实例化的名字"
}
},
components:{
Users,
}
}
</script>
<style>
</style>
或者
<template>
<div id="app">
<app-header></app-header>
<users></users>
<app-footer></app-footer>
</div>
</template>
<script>
import Users from './components/Users'
import Header from './components/Header'
import Footer from './components/Footer'
export default {
name: 'App',
data(){
return{
title:"users是全局组件的实例化的名字"
}
},
components:{
'users':Users,
'app-header':Header,
'app-footer':Footer
}
}
</script>
<style>
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue全局组件与局部组件使用方法详解
vue全局/局部注册,以及一些混淆的组件 main.js入口文件的一些常用配置, 在入口文件上定义的public.vue为全局组件,在这里用的是pug模版 .wraper 的形式相当于<div class=wraper></div> -main.js文件 **main.js入口文件的内容** import Vue from 'vue' import App from './App' import router from './router' // 引入公用组件的vue文件 他暴漏的
-
Vue组件之全局组件与局部组件的使用详解
组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以is特性扩展.个人认为就是一个可以重复利用的结构层代码片段. 全局组件注册方式:Vue.component(组件名,{方法}) eg: <body> <div id="app"> <my-component>&l
-
vue 组件 全局注册和局部注册的实现
全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-title',{ props:['title'], template:'<li v-on:click="$emit(\'change\')">{{title}}</li>' }) Vue.component('tab-content',{ props:['content
-
深入浅析Vue全局组件与局部组件的区别
1.组件声明 <!-- 全局组件模板father模板 --> <template id="father"> <div> <h3>这是{{name}}</h1> <div> <p>这是{{data}}</p> </div> </div> </template> var FATHER = { template: "#father", dat
-
vue组件定义，全局、局部组件，配合模板及动态组件功能示例
本文实例讲述了vue组件定义,全局.局部组件,配合模板及动态组件功能.分享给大家供大家参考,具体如下: 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3>我是标题3</h3>' }); Vue.component('aaa',Aaa); *组件里面放数据: data必须是函数的形式,函数必须返回一个对象(json) 2. 局部组件 放到某个组件内部 var vm=new Vue({ el:'#box', data
-
详解vue.js全局组件和局部组件
这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件--> <my-component></my-compo
-
vue组件（全局，局部，动态加载组件）
说说Vue.js组件 什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. vue组件有两种,一种是全局组件,一种是局部组件.整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件. one----全局组件引入写法:在项目的main.js中: 第一种,在main.js直接写template:' 模版字符串
-
VUE注册全局组件和局部组件过程解析
这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 全局组件 第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg}} </div> </template> <script> export default { name: 'users'
-
基于Vue全局组件与局部组件的区别说明
1.组件声明 <!-- 全局组件模板father模板 --> <template id="father"> <div> <h3>这是{{name}}</h1> <div> <p>这是{{data}}</p> </div> </div> </template> var FATHER = { template: "#father", dat
-
vue全局组件和局部组件的写法介绍
目录 全局组件和局部组件写法 全局组件引入写法 局部组件引入写法 vue全局/局部组件 全局组件和局部组件写法 vue组件有两种,一种是全局组件,一种是局部组件.整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件. 全局组件引入写法 在项目的main.js中: import Vue from 'vue'; import MyComponent from '@/components/MyComponent.vue'; // 导入自己写的组件文件 Vue.use(MyComp
-
vue中npm包全局安装和局部安装过程
全局安装是将npm包安装在你的node安装目录下的node_modules文件夹中.在windows和mac中,全局安装的默认路径是不同的.在mac中默认是安装到 /usr/locla/lib 中.在windows默认安装目录是 C:\Program Files\nodejs ,当然你也可以通过一下命令来查看全局安装路径. // 查看全局安装路径 npm root -g // 查看npm的基础设置 npm config ls // 查看安装目录路径 npm config get prefix 全
-
VUE3学习教程之全局组件和局部组件
目录 1. 概述 2. 全局组件 2.1 不使用组件的写法 2.2 使用组件 2.3 组件中包含变量 2.4 组件的复用 2.5 组件中使用组件 2.6 总结 3. 局部组件 3.1 局部组件的使用 3.2 总结 附:vue 3 组件的分类 全局组件与局部组件 总结 1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法 <body> <div id="myDiv&quo
-
基于JS实现父组件的请求服务过程解析
这篇文章主要介绍了基于JS实现父组件的请求服务过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 <template> <div class = 'car_list' reft='scrollobx' @scroll='scrollready($event)'> </div> </template> <script> export default { data() { return { le
-
vue新建项目并配置标准路由过程解析
这篇文章主要介绍了vue新建项目并配置标准路由过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 配置路由所有用到的地方总共四步或者说四处 1.index.js(src--router--index.js) import Vue from 'vue' import Router from 'vue-router' // import HelloWorld from '@/components/HelloWorld' import Home