vue全局组件与局部组件使用方法详解


Posted in Javascript onMarch 29, 2018

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: '<div>正常的组件模式</div>'
})
/* eslint-disable no-new */
// 生成vue 的根实例;创建每个组件都会生成一个vue的事咧
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

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

**public.vue的组件内容**


<template lang="pug">
.wrapper
 slot(text="我是全局组件") {{name}}

</template>

<script>
export default {
 name: 'HelloWor',
 // 全局组件里data属性必须是函数,这样才会独立,
 // 在组件改变状态的时候不会影响其他组件里公用的这个状态
 data () {
  return {
   name: '我是全局组件'
  }
 }
}
</script>

<style scoped>

</style>

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

parent.vue组件

<template lang="pug">
.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
</template>

<script>
import children from './children'
// children(:msg='msg', number='1')在组件里 也可以传递自定义的属性,但是是字符串类型,

export default {
 name: 'HelloWor',
 data () {
  return {
   // 通过prop将数据传递到子组件,并与v-model想对应的输入框相互绑定。
   msg: '这个是父组件的-prop-数据'
  }
 },
 components: {
  children
 }
}
</script>

<style scoped>
.wrap {
}
.input-hd {
 display: flex;
 flex-direction: row;
 align-items: center;
 height: 70px;
}
</style>

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

<template lang="pug">
.wrapper
 slot(text="我是子组件的text") 我是子组件的内容
 .name {{ msg }} {{ number }}
</template>

<script>
export default {
 name: 'HelloWor',
 // 接受的时候是用props接受,数组的形式,里面是字符串的形式。
 // 也可以传入普通的字符串
 // 在子组件中,props接受到的状态当作vue的实例属性来使用
 props: [ 'msg', 'number' ]
}
</script>

<style scoped>

</style>

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

Javascript 相关文章推荐
JavaScript中的类继承
Nov 25 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
javascript学习笔记之10个原生技巧
May 21 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
原生JS实现图片轮播与淡入效果的简单实例
Aug 21 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
vue组件表单数据回显验证及提交的实例代码
Aug 30 Javascript
javascript实现文件拖拽事件
Mar 29 #Javascript
vue 父组件调用子组件方法及事件
Mar 29 #Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 #Javascript
Vue 源码分析之 Observer实现过程
Mar 29 #Javascript
vue 实现全选全不选的示例代码
Mar 29 #Javascript
Angular开发实践之服务端渲染
Mar 29 #Javascript
使用vue2实现购物车和地址选配功能
Mar 29 #Javascript
You might like
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
文本框的字数限制功能jquery插件
2009/11/24 Javascript
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
js下拉菜单语言选项简单实现
2013/09/23 Javascript
js实现日期级联效果
2014/01/23 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
深入理解逻辑表达式的用法 与或非的用法
2016/06/06 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
移动设备手势事件库Touch.js使用详解
2017/08/18 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
深入理解Python爬虫代理池服务
2018/02/28 Python
python读取文本中数据并转化为DataFrame的实例
2018/04/10 Python
python安装twisted的问题解析
2018/08/21 Python
python获取url的返回信息方法
2018/12/17 Python
pandas分区间,算频率的实例
2019/07/04 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
技术总监的工作职责
2013/11/13 职场文书
音乐教师求职信
2014/06/28 职场文书
群众路线教育实践活动的心得体会
2014/09/03 职场文书
入党函调证明材料
2014/12/24 职场文书
小学六一主持词开场白
2015/05/28 职场文书
天堂的孩子观后感
2015/06/11 职场文书
Java集成swagger文档组件
2021/06/28 Java/Android
Golang 链表的学习和使用
2022/04/19 Golang