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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
Nov 28 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
JS函数this的用法实例分析
Feb 05 Javascript
javascript模拟评分控件实现方法
May 13 Javascript
跟我学习javascript的循环
Nov 18 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
Sep 05 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 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
PHP 单引号与双引号的区别
2009/11/24 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
php实现的简单中文验证码功能示例
2017/01/03 PHP
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
ES6学习笔记之let与const用法实例分析
2020/01/22 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
jquery实现图片放大镜效果
2020/12/23 jQuery
Python logging模块学习笔记
2014/05/24 Python
Python处理文本换行符实例代码
2018/02/03 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
使用Python实现NBA球员数据查询小程序功能
2020/11/09 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
怎样写好自我鉴定
2013/12/04 职场文书
授权委托书格式
2014/07/31 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
在Windows下安装配置CPU版的PyTorch的方法
2021/04/02 Python
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS
vue 给数组添加新对象并赋值
2022/04/20 Vue.js