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中有趣的反柯里化深入分析
Dec 05 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
javascript动态添加删除tabs标签的方法
Jul 06 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
基于JS实现一个随机生成验证码功能
May 29 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
PHP源码之explode使用说明
2011/08/05 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
JS日期和时间选择控件升级版(自写)
2013/08/02 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
Python 返回汉字的汉语拼音
2009/02/27 Python
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
python语言中with as的用法使用详解
2018/02/23 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
pytorch简介
2020/11/11 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
什么是规则表达式
2012/05/03 面试题
股权收购意向书
2014/04/01 职场文书
2015年社区民政工作总结
2015/04/21 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
Nginx的基本概念和原理
2022/03/21 Servers