这篇文章主要为大家详细介绍了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文件 他暴漏的是一个对象
import cpublic from './components/public' Vue.config.productionTip = false // 注册全局组件-要在vue的根事咧之前
// 参数 1是标签名字-string 2是对象 引入外部vue文件就相当与一个对象
Vue.component('public', cpublic)
// 正常注册全局组件的时候,第二个参数应该是对象。
Vue.component('public1', {
template: '&lt;div&gt;正常的组件模式&lt;/div&gt;'
})
/* eslint-disable no-new */
// 生成vue 的根实例;创建每个组件都会生成一个vue的事咧
new Vue({
el: '#app',
router,
template: '&lt;App/&gt;',
components: { App }
})

—public.vue 组件为定义的全局组件在任何组件里都可以直接使用,不需要在vue实例选项components上在次定义,也不需要再次导入文件路径。


**public.vue的组件内容** &lt;template lang="pug"&gt;
.wrapper
slot(text="我是全局组件") {{name}}
&lt;/template&gt;
&lt;script&gt;
export default {
name: 'HelloWor',
// 全局组件里data属性必须是函数,这样才会独立,
// 在组件改变状态的时候不会影响其他组件里公用的这个状态
data () {
return {
name: '我是全局组件'
}//欢迎加入前端全栈开发交流圈一起学习交流:864305860
}//面向1-3年前端人员
}//帮助突破技术瓶颈,提升思维能力 &lt;/script&gt;
&lt;style scoped&gt;
&lt;/style&gt;

parent.vue组件里,用到了public全局组件以及其他的子组件

parent.vue组件


&lt;template lang="pug"&gt;
.wrap
.input-hd
.title 名称:
input.input(type="text",v-model="msg",placeholder="请输入正确的值",style="outline:none;")
.content-detail
.content-name 我是父组件的内容
children(:msg='msg', number='1')
public
router-link(to='/parent/children2') 第二个子组件
router-view
&lt;/template&gt; &lt;script&gt;
import children from './children'
// children(:msg='msg', number='1')在组件里 也可以传递自定义的属性,但是是字符串类型, export default {
name: 'HelloWor',
data () {
return {
// 通过prop将数据传递到子组件,并与v-model想对应的输入框相互绑定。
msg: '这个是父组件的-prop-数据'
}
},
components: {
children
}
}
&lt;/script&gt; &lt;style scoped&gt;
.wrap {
}
.input-hd {
display: flex;
flex-direction: row;
align-items: center;
height: 70px;
}//欢迎加入前端全栈开发交流圈一起学习交流:864305860
&lt;/style&gt;

children.vue是parent.vue的子组件,但是只在parent.vue作用域里可用


&lt;template lang="pug"&gt;
.wrapper
slot(text="我是子组件的text") 我是子组件的内容
.name {{ msg }} {{ number }}
&lt;/template&gt; &lt;script&gt;
export default {
name: 'HelloWor',
// 接受的时候是用props接受,数组的形式,里面是字符串的形式。
// 也可以传入普通的字符串
// 在子组件中,props接受到的状态当作vue的实例属性来使用
props: [ 'msg', 'number' ]
}
&lt;/script&gt;
//欢迎加入前端全栈开发交流圈一起学习交流:864305860
&lt;style scoped&gt;
//帮助突破技术瓶颈,提升思维能力
&lt;/style&gt;

结语

感谢您的观看,如有不足之处,欢迎批评指正。

原文地址:https://segmentfault.com/a/1190000017285204

详解vue全局组件与局部组件使用方法的更多相关文章

  1. vue.js中的全局组件和局部组件

    组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...

  2. Vue 组件&组件之间的通信 之全局组件与局部组件

    在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...

  3. vue -全局组件和局部组件

    1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...

  4. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

  5. 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  6. 详解Vue大护法——组件

    1.什么是组件化 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的 所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题进 ...

  7. vue中的全局组件和局部组件的应用

    1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...

  8. VUE3 之 全局组件与局部组件

    1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法  <body> < ...

  9. 详解Vue.js 技术

    本文主要从8个章节详解vue技术揭秘,小编觉得挺有用的,分享给大家. 为了把 Vue.js 的源码讲明白,课程设计成由浅入深,分为核心.编译.扩展.生态四个方面去讲,并拆成了八个章节,如下: 准备工作 ...

随机推荐

  1. lcez校内模拟赛: 小R与苹果派——题解

    题目传送 首先对两个数组排序. 然后预处理出数组p[i]表示b[x]<a[i]的最大的x. 然后我们设f[i][k]表示对于前i个派,我单独选出来k组a[y]>b[y].(即此时有k组a& ...

  2. kaliXSSbeef的使用

    Kali中Beef的安装和使用: 先打开终端输入 apt-get install beef-xss 然后切换到beef的安装目录 cd /usr/share/beef-xss 然后启动beef ./b ...

  3. [CSP-S模拟测试]:花(DP)

    题目传送门(内部题111) 输入格式 一个整数$T$,表示测试数据组数. 每组测试数据占一行,两个整数,分别表示$L$和$S$. 输出格式 对每组数据,输出一个整数表示答案. 样例 样例输入1: 13 ...

  4. Django JWT

    概述 如果各位不了解 JWT,不要紧张,它并不可怕. JSON Web Token(JWT)是一个非常轻巧的规范.这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息. 让我们来假想一下一个 ...

  5. java基本数据类型全面总结

    Java数据类型(type)可以分为两大类:基本类型(primitive types)和引用类型(reference types).下面是Java团长给大家整理的java基本数据类型相关知识,感兴趣的 ...

  6. HearthBuddy炉石兄弟 Method 'CollectionDeckBoxVisual.IsValid' not found.

    [CollectionManagerScene_COLLECTION] An exception occurred when calling CacheCustomDecks: System.Miss ...

  7. laravel 浏览器图标的设置方式

    <head> <meta charset="UTF-8"> <title>叮叮书店</title> <link href=&q ...

  8. spark MLlib 概念 2:Stratified sampling 层次抽样

    定义: In statistical surveys, when subpopulations within an overall population vary, it is advantageou ...

  9. DeepFaceLab: 可视化交互式合成功能简介!

    DeepFaceLab在沉寂了几个月后(目测Iperov同志讨生活去了),在8月下旬又迎来了重大更新.我总结了一下,主要是更新了三大功能. 新增Avatar模型 交互式转换器 半脸模型支持FAN ​ ...

  10. Other | 十招教你找到海量PPT模板

    转载自:https://www.douban.com/note/330962457/ 问:PPT模板是什么含义? 答: 先假定你们要的是这种网上到处泛滥成灾的主题PPT吧,下面请耐心看到最后,秋叶老师 ...