vue高级进阶( 一 ) 组件精髓概述
前言
这个系列可能会分为几部分:
- 基础以及高级用法总结
- 一些比较有代表性的实战
- 源码解析(一定是用最粗俗,不对,是最通俗的语言讲解,这个我可以保证)
总之一定对得起高级进阶这几个字。。。
组件分类
vue组件主要包含:
- 由vue-router产生的页面,可以称之为路由组件
- 独立基础组件:例如Date和input这之类的可以全局复用的基础组件
- 业务组件,除了以上两种就是业务组件
组件精髓
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种用法)
ref
:给元素或组件注册引用信息;$parent
/$children
:访问父 / 子实例。props
父向子传递$emit和$on
,子----->父vuex
一些碎知识
改变数组某一项的方法:
- 直接改变对象的引用
- 可以使用push,shift等方法
- 可以使用vue的变异方法
Vue.set(vm.userinfo,2,{a:1}) == vm.$set(vm.userinfo,2,{a:1})
is属性
<table>
<tr id="row"></tr> 注意is的使用 table中只能使用tr
</table>在子组件中的data必须是一个function,来return 一个对象,这是为了保证
每一个实例的data属性都是独立的,不会相互影响
vue高级进阶( 一 ) 组件精髓概述的更多相关文章
- vue 高级属性父组件provide向子组件发送数据,子组件通过inject接收数据
以前父组件向子组件中传值是通过props传值,子组件不能更改父组件中的值,但是可以通过从父组件中获取的值定义给自己的data值,这里父组件可以通过provide向子组件传递自己组件中的data值,子组 ...
- vue 基础-->进阶 教程(2): 指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- vue从入门到进阶:组件Component详解(六)
一.什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功 ...
- vue 基础-->进阶 教程(2): 指令、自定义指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- Vue.js 源码分析(二十七) 高级应用 异步组件 详解
当我们的项目足够大,使用的组件就会很多,此时如果一次性加载所有的组件是比较花费时间的.一开始就把所有的组件都加载是没必要的一笔开销,此时可以用异步组件来优化一下. 异步组件简单的说就是只有等到在页面里 ...
- Vue.js 源码分析(二十八) 高级应用 transition组件 详解
transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: n ...
- 【Vue】详解组件的基础与高级用法
Vue.js 最核心的功能就是组件(Component),从组件的构建.注册到组件间通信,Vue 2.x 提供了更多方式,让我们更灵活地使用组件来实现不同需求. 一.构建组件 1.1 组件基础 一个组 ...
- 高级进阶DB2(第2版)——内部结构、高级管理与问题诊断
<高级进阶DB2(第2版)——内部结构.高级管理与问题诊断> 基本信息 作者: 牛新庄 出版社:清华大学出版社 ISBN:9787302323839 上架时间:2013-7-3 出版 ...
- 高级进阶DB2(第2版)
<高级进阶DB2(第2版)> 基本信息 作者: 牛新庄 出版社:清华大学出版社 ISBN:9787302323839 上架时间:2013-7-3 出版日期:2013 年7月 开本:16开 ...
随机推荐
- net core 添加cors,解决跨域问题
ConfigureServices //允许跨域 services.AddCors(options => { options.AddPolicy("any", builder ...
- Docker 架构演进之路
转载:https://developer.aliyun.com/article/673009 前言 Docker已经推出了5年,在这5年中它极大的改变了互联网产品的架构,推进了新的产品开发.测试和运维 ...
- vue模板三目运算判断报错
问题: 关于vue三目运算符提示报错 1.三目运算符等于判断 {{ a==b ? '是' : '否'}} 2.其他三目运算符 <代表小于号(<) >代表大于符号(>) ≤表示小 ...
- 正点原子sys.h文档详解
文档主体内容为位带的映射,目的是实现位带操作. 第一部分:位带映射的宏函数 1 #define BITBAND(addr, bitnum) ((addr & 0xF0000000)+0x200 ...
- Voletile-多线程小例子
public class Test{ public static volatile int t = 0; //如果没有下面的全局锁标识,则结果不一定为10*1000 public static Str ...
- 30分钟熟练使用最常用的ES6,还不学是等着被卷死?
一. 关于ES6 了解一门技术或者语言,最好的方法就是知道它能做些什么 ES6 , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范 那么它为什么会出现呢? 每一次标准的诞生都意味着语 ...
- mysql主从故障跳过错误
mysql主从故障跳过错误1.从库报错 21,22,23,25无法执行Retrieved_Gtid_Set: 265c6c2a-86ca-11ed-b07a-0242ac120002:1-25Exec ...
- Kittle 插入更新,时间格式错误。
错误1:mysql转oracle 把所有时间类型格式,进行转换,不然会报时间格式错误. 错误2:插入更新时,数据量大停止了,表没有设置主键,导致的.
- JDK卸载与JDK12 安装
JDK卸载与JDK12 安装 一.JDK卸载 控制面板>程序和功能>jdk程序(java 8 update 391:java SE Development Kit8 update 391) ...
- 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 ...