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 相关文章推荐
js TextArea的选中区域处理
Dec 28 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
Vue登录注册并保持登录状态的方法
Aug 17 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
详解JavaScript中的强制类型转换
Apr 15 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
原生js实现自定义难度的扫雷游戏
Jan 22 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笔记之:AOP的应用
2013/04/24 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
js prototype截取字符串函数
2010/04/01 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
深入理解JavaScript 闭包究竟是什么
2013/04/12 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
JavaScript中操作Mysql数据库实例
2015/04/02 Javascript
Restify中接入Socket.io报Error:Can’t set headers的错误解决
2017/03/28 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[02:06]DOTA2英雄基础教程 暗影萨满
2013/12/16 DOTA
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
Python实现对字符串的加密解密方法示例
2017/04/29 Python
Python抓取框架Scrapy爬虫入门:页面提取
2017/12/01 Python
python计算日期之间的放假日期
2018/06/05 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
使用Python在Windows下获取USB PID&amp;VID的方法
2019/07/02 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
在Tensorflow中实现梯度下降法更新参数值
2020/01/23 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
英国健身专家:WIT Fitness
2021/02/09 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
导师就业推荐信范文
2014/05/22 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
班主任开场白
2015/06/01 职场文书
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python