Vue关于组件化开发知识点详解


Posted in Javascript onMay 13, 2020

全局组件注册

Vue.component('first-component', {
 data: function () {
  return {
   count: 0
  }
 },
 template: '<button @click="count++">{{ count }}</button>'
})

data 必须是一个函数

组件模板内容必须是单个根元素

组件模板内容可以是模板字符串

全局组件可以嵌套全局组件

组件命名方式

Vue.component('first-component', {/* .... */})
// 普通标签模板中不能使用驼峰, 只能在template中使用驼峰方式
Vue.component('firstComponent', {/* .... */})

局部组件注册

局部注册的组件只能在父组件中使用 ;

var vm = new Vue({
 components: {
  'hello-world': {
   data: function () {
    return {
     msg: 'hello world'
    }
   },
   template: '<div>{{ msg }}</div>'
  }
 }
})

props 传递数据原则 : 单向数据流

组件内部通过 props 接收传递过来的值

Vue.component('son-com', {
	props: ['msg', 'parentMsg']
  template: '<div>{{msg + "---" + parentMsg}}</div>'
})

父组件通过属性将值传递给子组件

<son-com msg="父组件的值" :parent-msg="bind绑定的父组件的值"></son-com>

props 属性名规则

  • 在props中使用驼峰形式, 模板中需要使用短横线的形式 ; html 对大小写的不敏感的
  • 字符串中没有这个限制

props 传递类型

<div id="app">
 <son-com
  :str="pstr"
  :num="pnum" <!-- 注意如果不用 v-bind 则获取不到准确的属性值 -->
  :boolean="pboolean"
  :arr="parr"
  :obj="pobj"
 >
 </son-com>
</div>
Vue.component('son-com', {
 props: ['str', 'num', 'boolean', 'arr', 'obj'],
 template: `
  <div>
   <div>{{ str }}</div>
   <div>{{ num }}</div>
   <div>{{ boolean }}</div>
   <ul>
    <li :key="index" v-for="(item, index) in arr">{{ item }}</li>
   </ul>
   <div>
    <span>{{ obj.name }}</span>
    <span>{{ obj.age }}</span>
   </div>
  </div>
 `
})
var vm = new Vue({
 el: '#app',
 data: {
  pstr: 'hello Vue',
  pnum: 12,
  pboolean: true,
  parr: ['apple', 'banner', 'orange'],
  pobj: {name: 'zs', age: 22}
 }
})

子组件向父组件传值

子组件通过自定义事件向父组件传值 $emit()

Vue.component('son-com', {
 template: `
  <div>
   <button @click="$emit('parent')">点击放大父组件字体</button>
   传值从第二个参数开始
	 <button @click="$emit('parent', 10)">点击放大父组件字体</button>
  </div>
 `
})

父组件监听子组件事件

<div id="app">
 <div>父组件</div>
 <son-com @parent="handle"></son-com>
 <!-- 接收值为固定 $event-->
 <son-com @parent="handle($event)"></son-com>
</div>
var vm = new Vue({
 el: '#app',
 data: {
  font: 10
 },
 methods: {
  handle: function (val) {
   this.font += 5
   this.font += val // 此时的val就是 子组件传递过来的值
  }
 },
})

非父子组件传值

单独的事件中心管理组件之间的通信

// 创建事件中心
var hub = new Vue()

// 在 mounted 中监听事件
hub.$on('eventName', fn)
hub.$off('eventName') // 销毁事件

// 在 methods 中处理事件
hub.$emit('eventName', param)

组件插槽

<tmp-com>
 <!-- 只能匹配一个标签 -->
 <p slot="header">程序错误</p>
 <div>我是没有匹配的内容</div>
 <!-- 可以匹配多个标签 -->
 <template slot="footer">
  <p>匹配页脚一次</p>
  <p>匹配页脚两次</p>
 </template>
</tmp-com>
Vue.component('tmp-com', {
 template: `
  <div>
   <header>
    <slot name="header"></slot>
   </header>
   <div>
    如果上面没有匹配到对应的标签就会展示默认内容
    <slot></slot>
   </div>
   <footer>
    <slot name="footer"></slot>
   </footer>
  </div>
 `
})

到此这篇关于Vue关于组件化开发知识点详解的文章就介绍到这了,更多相关Vue 组件化开发内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery 批量上传图片实现代码
Jan 28 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
Oct 31 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
jQuery获取radio选中项的值实例
Jun 18 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
angularJS之$http:与服务器交互示例
Mar 17 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 #Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 #Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 #Javascript
JavaScript 接口原理与用法实例详解
May 12 #Javascript
ES5新增数组的实现方法
May 12 #Javascript
JavaScript内置对象之Array的使用小结
May 12 #Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 #Javascript
You might like
使用PHPMyAdmin修复论坛数据库的图文方法
2012/01/09 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
Prototype Hash对象 学习
2009/07/19 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
JavaScript实现的开关灯泡点击切换特效示例
2019/07/08 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
struct与class的区别
2014/02/03 面试题
幼师自荐信
2013/10/26 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
财产保全担保书范文
2014/04/01 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
作风转变心得体会
2014/09/02 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
英文慰问信
2015/02/14 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
让世界充满爱观后感
2015/06/10 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python