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 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 Javascript
js图片轮播手动切换效果
Nov 10 Javascript
Javascript复制实例详解
Jan 28 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
使用Javascript简单计算器
Nov 17 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
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
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
缓存技术详谈―php
2006/12/14 PHP
PHP7正式版测试,性能惊艳!
2015/12/08 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
srcElement表格样式
2006/09/03 Javascript
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
js showModalDialog 弹出对话框的简单实例(子窗体)
2014/01/07 Javascript
JQuery对表格进行操作的常用技巧总结
2014/04/23 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
用Python PIL实现几个简单的图片特效
2019/01/18 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
对于Python深浅拷贝的理解
2019/07/29 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
现金出纳岗位职责
2014/03/15 职场文书
品酒会策划方案
2014/05/26 职场文书
社区活动策划方案
2014/08/21 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
2014年派出所工作总结
2014/11/21 职场文书
体育个人工作总结
2015/02/09 职场文书
nginx配置指令之server_name的具体使用
2022/08/14 Servers