前言

这个系列可能会分为几部分:

  1. 基础以及高级用法总结
  2. 一些比较有代表性的实战
  3. 源码解析(一定是用最粗俗,不对,是最通俗的语言讲解,这个我可以保证)

总之一定对得起高级进阶这几个字。。。

组件分类

vue组件主要包含:

  1. 由vue-router产生的页面,可以称之为路由组件
  2. 独立基础组件:例如Date和input这之类的可以全局复用的基础组件
  3. 业务组件,除了以上两种就是业务组件

组件精髓

props

  • tppe 类型
  • default 默认
    • 如果是对象,数组,必须要写成方法进行返回
msg:{
type: Array,
default: ()=>([])
}
  • validator 校验,有一个参数value
  • inheritAttrs 是否继承html特性
  • 子组件不能修改父组件传递过来的prop

event

方法一

<parent-com @on-click="handleClick"></parent-com>

子组件
<button>点击</button>
在子组件中触发
this.$emit('on-click', event)

方法二

加上.native就是原生方法
<parent-com @click.native="handleClick"></parent-com> 子组件
<button>点击</button>

slot

<slot> 节点就是指定的一个插槽的位置,v-slot:[name]可以指定插槽的位置,有了name就叫具名插槽

具名slot

元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素 父组件

    <slotshow>
<p>{{msg}}</p>
<h6 slot="xxx">就是没有废话!</h6> vue2.6以上的版本是这样的
<h6 v-slot:xxx>就是没有废话!</h6>
</slotshow>

子组件

    <div class="slotcontent">
<slot></slot>
<slot name="xxx"></slot>
</div>

作用域插槽

作用域插槽是一种特殊类型的插槽,用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。 在子组件中,只需将数据传递到插槽,就像将 props 传递给组件一样,插槽的内容就可以使用这个传递过来的数据在父级中,具有特殊属性 scope 的 <template> 元素必须存在,表示它是作用域插槽的模板。scope 的值对应一个临时变量名,此变量接收从子组件中传递的 props 对象.

列表组件

var childNode = {
template: `
<ul>
// 通过:text="item.text"进行传值
<slot name="item" v-for="item in items" :text="item.text">默认值</slot>
</ul>
`,
data(){
return{
items:[
{id:1,text:'第1段'},
{id:2,text:'第2段'},
{id:3,text:'第3段'},
]
}
}
}; var parentNode = {
template: `
<div class="parent">
<p>父组件</p>
<child>
// 通过props进行接收
<template slot="item" scope="props">
<li>{{ props.text }}</li>
</template>
</child>
</div>
`,
components: {
'child': childNode
},
};

组件通信(第二篇会详细讲解8种用法)

  1. ref:给元素或组件注册引用信息;
  2. $parent / $children:访问父 / 子实例。
  3. props 父向子传递
  4. $emit和$on,子----->父
  5. vuex

一些碎知识

  1. 改变数组某一项的方法:

    1. 直接改变对象的引用
    2. 可以使用push,shift等方法
    3. 可以使用vue的变异方法
    Vue.set(vm.userinfo,2,{a:1})  == vm.$set(vm.userinfo,2,{a:1})
    
    
  2. is属性

    <table>
    <tr id="row"></tr> 注意is的使用 table中只能使用tr
    </table>
  3. 在子组件中的data必须是一个function,来return 一个对象,这是为了保证每一个实例的data属性都是独立的,不会相互影响

 

vue高级进阶( 一 ) 组件精髓概述的更多相关文章

  1. vue 高级属性父组件provide向子组件发送数据,子组件通过inject接收数据

    以前父组件向子组件中传值是通过props传值,子组件不能更改父组件中的值,但是可以通过从父组件中获取的值定义给自己的data值,这里父组件可以通过provide向子组件传递自己组件中的data值,子组 ...

  2. vue 基础-->进阶 教程(2): 指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  3. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  4. vue从入门到进阶:组件Component详解(六)

    一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功 ...

  5. vue 基础-->进阶 教程(2): 指令、自定义指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  6. Vue.js 源码分析(二十七) 高级应用 异步组件 详解

    当我们的项目足够大,使用的组件就会很多,此时如果一次性加载所有的组件是比较花费时间的.一开始就把所有的组件都加载是没必要的一笔开销,此时可以用异步组件来优化一下. 异步组件简单的说就是只有等到在页面里 ...

  7. Vue.js 源码分析(二十八) 高级应用 transition组件 详解

    transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...

  8. 【Vue】详解组件的基础与高级用法

    Vue.js 最核心的功能就是组件(Component),从组件的构建.注册到组件间通信,Vue 2.x 提供了更多方式,让我们更灵活地使用组件来实现不同需求. 一.构建组件 1.1 组件基础 一个组 ...

  9. 高级进阶DB2(第2版)——内部结构、高级管理与问题诊断

    <高级进阶DB2(第2版)——内部结构.高级管理与问题诊断> 基本信息 作者: 牛新庄    出版社:清华大学出版社 ISBN:9787302323839 上架时间:2013-7-3 出版 ...

  10. 高级进阶DB2(第2版)

    <高级进阶DB2(第2版)> 基本信息 作者: 牛新庄 出版社:清华大学出版社 ISBN:9787302323839 上架时间:2013-7-3 出版日期:2013 年7月 开本:16开 ...

随机推荐

  1. net core 添加cors,解决跨域问题

    ConfigureServices //允许跨域 services.AddCors(options => { options.AddPolicy("any", builder ...

  2. Docker 架构演进之路

    转载:https://developer.aliyun.com/article/673009 前言 Docker已经推出了5年,在这5年中它极大的改变了互联网产品的架构,推进了新的产品开发.测试和运维 ...

  3. vue模板三目运算判断报错

    问题: 关于vue三目运算符提示报错 1.三目运算符等于判断 {{ a==b ? '是' : '否'}} 2.其他三目运算符 <代表小于号(<) >代表大于符号(>) ≤表示小 ...

  4. 正点原子sys.h文档详解

    文档主体内容为位带的映射,目的是实现位带操作. 第一部分:位带映射的宏函数 1 #define BITBAND(addr, bitnum) ((addr & 0xF0000000)+0x200 ...

  5. Voletile-多线程小例子

    public class Test{ public static volatile int t = 0; //如果没有下面的全局锁标识,则结果不一定为10*1000 public static Str ...

  6. 30分钟熟练使用最常用的ES6,还不学是等着被卷死?

    一. 关于ES6 了解一门技术或者语言,最好的方法就是知道它能做些什么 ES6 , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范 那么它为什么会出现呢? 每一次标准的诞生都意味着语 ...

  7. mysql主从故障跳过错误

    mysql主从故障跳过错误1.从库报错 21,22,23,25无法执行Retrieved_Gtid_Set: 265c6c2a-86ca-11ed-b07a-0242ac120002:1-25Exec ...

  8. Kittle 插入更新,时间格式错误。

    错误1:mysql转oracle 把所有时间类型格式,进行转换,不然会报时间格式错误. 错误2:插入更新时,数据量大停止了,表没有设置主键,导致的.

  9. JDK卸载与JDK12 安装

    JDK卸载与JDK12 安装 一.JDK卸载 控制面板>程序和功能>jdk程序(java 8 update 391:java SE Development Kit8 update 391) ...

  10. pip安装psycopg2报错Could not find a version that satisfies the requirement psycopg2

    pip安装psycopg2报错 在使用命令(pip install psycopg2)安装psycopg2时,会报错: ERROR: Could not find a version that sat ...