1、组件注册


Vue.component('name',{}) 创建的组件都是全局组件,它们在注册之后可以用在任何新创建的Vue根实例(new Vue)的模板中。第一个参数是组件的名字,第二个参数是一个方法,可以在其中定义组件的data数据、template模板、props传值、components组件注册、computed计算属性、method方法、watch监听数据变化、以及生命周期的构子函数:beforeCreate、created、beforeMount、mounted、beforeupdate、updated、beforeDestroy、destroyed。
推荐创建一个 components 目录,并将每个组件放置在其各自的文件中:
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
}
}

2、Prop

  • 由于浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop名需要使用其等价的 kebab-case (短横线分隔命名) 命名。prop可以是任何类型的数据、变量或对象,当prop是对象时,即使对象是静态的也必须使用v-bind。不要在子组件中改变prop的数据,可以在自身的data里保存一份该prop属性


    Vue.component('user', {
    props: ['sayHello']
    })
    <user say-Hello="hello!"></user>
    我们可以传递静态Prop(如上),也可以使用v-bind传递动态Prop(如下)
    <user :title="post.title"></user>
  • prop验证(控制传入组件数据的类型)
    Vue.component('mycomponent',{


    props:{
    propZ:null, //匹配任何类型
    propA:Number, //数字类型
    propB:[Number,String], //多个可能的类型
    propC:{
    type:String,
    required:true, //必填
    default:'Hello' //默认
    },
    propD:{
    type:Object, //对象类型
    default:function(){ //默认函数
    return {
    msg:'hello'
    }
    }
    },
    propE:{
    //自定义验证
    validator: function (value) {
    // 这个值必须匹配下列字符串中的一个
    return ['success', 'warning', 'danger'].indexOf(value) !== -1
    }
    },
    user:Person
    }

    })

3、自定义事件


1、事件名建议始终使用短横线连接的方式如:my-event
2、自定义组件的 v-model:
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})
<base-checkbox v-model="lovingVue"></base-checkbox>

4、插槽<slot>


1、组件:&lt;base-layout&gt;:
&lt;div class="container"&gt;
&lt;header&gt;
&lt;slot name="header"&gt;&lt;/slot&gt;
&lt;/header&gt;
&lt;main&gt;
&lt;slot&gt;&lt;/slot&gt;
&lt;/main&gt;
&lt;footer&gt;
&lt;slot name='footer'&gt;&lt;/slot&gt;
&lt;/footer&gt;
&lt;slot name="footer"&gt;&lt;/slot&gt;
&lt;/div&gt; &lt;base-layout&gt;
&lt;template slot='header'&gt;
&lt;h3&gt;我是Header&lt;/h3&gt;
&lt;/template&gt;
&lt;p&gt;我没有名字&lt;/p&gt;
&lt;p&gt;显示在默认插槽&lt;/p&gt;
&lt;h3 slot='footer'&gt;具名插槽2&lt;/h3&gt;
&lt;/base-layout&gt;
结果:
&lt;div class="container"&gt;
&lt;header&gt;
&lt;h3&gt;我是Header&lt;/h3&gt;
&lt;/header&gt;
&lt;main&gt;
&lt;p&gt;我没有名字&lt;/p&gt;
&lt;p&gt;显示在默认插槽&lt;/p&gt;
&lt;/main&gt;
&lt;footer&gt;
&lt;h3&gt;具名插槽2&lt;/h3&gt;
&lt;/footer&gt;
&lt;/div&gt;

5、动态组件与异步组件


&lt;!-- 失活的组件将会被缓存!--&gt;
&lt;keep-alive&gt; //&lt;keep-alive&gt;缓存组件切换状态,组件必须有名字
&lt;component v-bind:is="currentTabComponent"&gt;&lt;/component&gt; //is 特性来切换不同的组件
&lt;/keep-alive&gt;

来源:https://segmentfault.com/a/1190000016354966

深入了解Vue.js组件笔记的更多相关文章

  1. Vue.js 组件笔记

    Vue 组件总结笔记 一. 创建组件 1. 使用组件三部曲 ( 创建, 注册, 使用 ) 2. 全局组件:Vue.component('tag', {}); 3. 局部组件: components 属 ...

  2. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  3. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  4. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  5. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  6. Vue.js 学习笔记 一

    本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星星! https://github.com/zwl-jasmine95/Vue_test 以下所有知 ...

  7. Vue.js 学习笔记 第2章 数据绑定和第一个Vue应用

    本篇目录: 2.1 Vue实例与数据绑定 2.2 指令与事件 2.3 语法糖 学习任何一种框架,从一个Hello World应用开始是最快了解该框架特性的途径. 我们先从一段简单的HTML代码开始,感 ...

  8. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  9. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

随机推荐

  1. 曹工改bug:cpu狂飙,old gc频繁,线程神秘死亡连环案件调查报告

    曹工改bug:cpu狂飙,old gc频繁,线程神秘死亡连环案件调查报告 前言 前两天,访问开发环境上一个java服务,发现一直转圈圈,因为我开着fiddler,可以看到的现象是,接口一直没返回:本来 ...

  2. C#串口通讯,复制粘贴就可用,仅仅介绍怎样最快的搭建一个串口通讯,异常拦截等等需要自己加上

    using System; using System.Collections.Generic; using System.IO.Ports; using System.Text; //串口通讯类 pu ...

  3. Git使用感悟

    前言 分支介绍 我们现在开发的分支一般是这样的(基于上面那张图片的): master:上线用的 dev:开发用的 featature_xxx:开发用的 test:测试用的 hotfix:修复bug的 ...

  4. 【洛谷日报#26】GCC自带位运算系列函数

    文章转自 洛谷 谈到GCC的黑科技,大家想到的一定是这句: #pragma GCC optimize (3)//吸氧 抑或是这句: #pragma GCC diagnostic error " ...

  5. Selenium使用cookis登录,并临时将cookis存储在本地【shelve数据库】

    Python中自带了一个shelve库,可以帮助我们存储一些少量的数据. shelve数据库类似redis,是以[键值对]的方式进行数据的存储,有点像"字典"这种数据结构,存储在本 ...

  6. OC基础--数据类型与表达式

    前言 做iOS开发有3年了,从当初的小白到现在,断断续续看过很多资料,之前也写过一些博文来记录,但是感觉知识点都比较凌乱.所以最近准备抽时间把iOS开发的相关知识进行一个梳理,主要分为OC基础.UI控 ...

  7. The Data Warehouse Toolkit 阅读笔记

    前言 这篇笔记的主要内容来至于The Data Warehouse Toolkit,该书可以称为数仓建模的圣经 什么是星型模型 以一个业务实时为主表.比如一笔订单就是一个业务事实.订单有商品的SKU信 ...

  8. JAVA 各种锁机制

    可重入锁 可重锁是指同一个线程,外层函数获取锁后,内层函数可以自动获取到锁. java中synchronized和ReentrantLock都是可重入锁. 对于synchronized,其实现机制有j ...

  9. SpringMVC-08-整合SSM之基本环境搭建

    8. 整合SSM 环境要求 IDEA MySQL 5.5 Tomcat 9 Maven 3.5.2 要求: 需要熟练掌握MySQL数据库,Spring,JavaWeb及Mybatis知识,简单的前端知 ...

  10. axure rp extension for chrome怎么用

    1)打开文件(原型图)的resources文件夹>chrome文件夹>将文件axure-chrome-extension.crx拉至谷歌浏览器的扩展程序页面,点击确定添加 2)提示出错时, ...