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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2019-10-08

详解vue.js全局组件和局部组件

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 首先Vue组件的使用有3个步骤,创建组件构造器,注册组件,使用组件3个方面. 代码演示如下: <!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件--> <my-component></my-compo

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组件(全局,局部,动态加载组件)

说说Vue.js组件 什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. vue组件有两种,一种是全局组件,一种是局部组件.整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件. one----全局组件引入写法:在项目的main.js中: 第一种,在main.js直接写template:' 模版字符串

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 directive定义全局和局部指令及指令简写

directive定义全局和局部指令以及指令简写 1.使用Vue.directive()定义一个全局指令    Vue.directive('指令名称',{对象}) 2.参数一:指令的名称,定义时指令前面不需要写v- 3.参数二:是一个对象,该对象中有相关的操作函数 4.在调用的时候必须写v- 5.自定义指令中的常用的3个钩子函数:     5.1bind:       1.指令绑定到元素上回立刻执行bind函数,只执行一次       2.每个函数中第一个参数永远是el,表示绑定指令的元素,e

vue+elementUI实现表单和图片上传及验证功能示例

本文实例讲述了vue+elementUI实现表单和图片上传及验证功能.分享给大家供大家参考,具体如下: 最终实现需求如下图: form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有: 1.表单内容的验证及必填项 2.新增和编辑用同一个组件如何处理数据 3.图片需要和信息一起传递(即不允许自动上传) 4.图片必填的验证问题 针对上述问题作出方案: 1.el-form的表单验证需要注意几个地方: a:el-form-item的prop值需要和表单标签的v-model值保持一

vue基础之使用get、post、jsonp实现交互功能示例

本文实例讲述了vue基础之使用get.post.jsonp实现交互功能.分享给大家供大家参考,具体如下: 一.如果vue想做交互,引入: vue-resouce 二.get方式 1.get获取一个普通文本数据: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style>

vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例

本文实例讲述了vue.js使用v-model实现表单元素(input) 双向数据绑定功能.分享给大家供大家参考,具体如下: v-model 一般表单元素(input) 双向数据绑定 el:'#box',//这里放的是选择器. 不然会不生效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vu

vue数据操作之点击事件实现num加减功能示例

本文实例讲述了vue数据操作之点击事件实现num加减功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue num加减</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></scrip

vue实现form表单与table表格的数据关联功能示例

本文实例讲述了vue实现form表单与table表格的数据关联功能.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sc

vue基于两个计算属性实现选中和全选功能示例

本文实例讲述了vue基于两个计算属性实现选中和全选功能.分享给大家供大家参考,具体如下: 还是选中和全选功能,用两个计算属性来实现,别人的代码,思维确实不一样.学习了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue选中和全选</title> <style> t

你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)

Vue作为最近最炙手可热的前端框架,其简单的入门方式和功能强大的API是其优点.而同时因为其API的多样性和丰富性,所以他的很多开发方式就和一切基于组件的React不同,如果没有对Vue的API(有一些甚至文档都没提到)有一个全面的了解,那么在开发和设计一个组件的时候有可能就会绕一个大圈子,所以我非常推荐各位在学习Vue的时候先要对Vue核心的所有API都有一个了解. 举个例子,通知组件notification基本是现代web开发标配,在很多地方都能用到.而在以Vue作为核心框架的前端项目中,因