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 相关文章推荐
js加密解密字符串可自定义密码因子
May 13 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
从setTimeout看js函数执行过程
Dec 19 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
教你搭建按需加载的Vue组件库(小结)
Jul 29 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
js验证账户名是否重复
May 26 Javascript
JavaScript仿京东轮播图效果
Feb 25 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
SublimeText 2编译python出错的解决方法(The system cannot find the file specified)
2013/11/27 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
Python单链表简单实现代码
2016/04/27 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
python实现梯度法 python最速下降法
2020/03/24 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
PHP中如何使用Cookie
2015/10/28 面试题
化学教师自荐信范文
2013/12/28 职场文书
个人求职信范文分享
2014/01/06 职场文书
端午节活动总结报告
2015/02/11 职场文书
小孩不笨观后感
2015/06/03 职场文书
党组织结对共建协议书
2016/03/23 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
聊聊redis-dump工具安装问题
2022/01/18 Redis
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python