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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
Mar 13 Javascript
一个仿糯米弹框效果demo
Jul 22 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
May 18 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
JS实现的计数排序与基数排序算法示例
Dec 04 Javascript
如何使用vuex实现兄弟组件通信
Nov 02 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 date与gmdate的获取日期的区别
2010/02/08 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
php生成略缩图代码
2012/07/16 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
JavaScript表格常用操作方法汇总
2015/04/15 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
跟老齐学Python之编写类之三子类
2014/10/11 Python
收集的几个Python小技巧分享
2014/11/22 Python
python开发之thread线程基础实例入门
2015/11/11 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python类的继承和多态代码详解
2017/12/27 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
男方父母婚礼答谢词
2014/01/25 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
九寨沟导游词
2015/02/02 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
Pandas-DataFrame知识点汇总
2022/03/16 Python