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之软键盘实现(js源码)
Jan 30 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 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
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
php图像验证码生成代码
2017/06/08 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
2020/06/19 Javascript
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
用python代码做configure文件
2014/07/20 Python
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
Pytorch 中retain_graph的用法详解
2020/01/07 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
Space NK美国站:英国高端美妆护肤商城
2017/05/22 全球购物
毕业生教师求职信
2013/10/20 职场文书
电子商务专业自我鉴定
2013/12/18 职场文书
八年级生物教学反思
2014/01/22 职场文书
大学毕业感言200字
2014/03/09 职场文书
学校招生宣传广告词
2014/03/19 职场文书
《去年的树》教学反思
2014/04/11 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
超市促销活动总结
2014/07/01 职场文书
房屋产权证明书
2014/10/15 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电