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开 ...
随机推荐
- Collection集合类(Java)
Collection集合体系 1,Collection集合分为两大类List集合和Set集合 List系列集合特点: 有序,可重复,有索引 ArrayList:有序,可重复,有索引. LinkedLi ...
- (八) Mysql 脑图总结
- idea连接数据库,驱动问题
选本地maven仓库的jar包就好
- WPFMVVM实现ICommand与INotifyPropertyChanged接口
话不多说直接上代码 INotifyPropertyChanged实现代码 internal class NotifyBase : INotifyPropertyChanged { public eve ...
- Centos7.6centOS7.8多网卡多IP配置
1.进入网卡配置文件 cd /etc/sysconfig/network-scripts/2.创建新网卡的配置文件 ifcfg-eth1 cp ifcfg-eth0 ifcfg-eth1这样副网卡配置 ...
- docker容器SSH服务自启动
使用ubuntu容器,会在容器内安装ssh服务,但是会发现当容器重启后,如何实现ssh服务自动重启呢?可以使用Dockerfile参看此处 ,本文介绍一种在docker容器中进行配置的方法 安装ssh ...
- Mybatis 中传入List实现 批量插入、批量更新、批量删除
1. 批量插入: Mapper层: int insertList(List<UsersModel> list); 对应的mapper.xml: <!--批量插入信息--> &l ...
- 一些JVM指令
1.jps:查看本机java进程信息. 2 .jstack:打印线程的栈信息,制作线程dump文件. 3.jmap:打印内存映射,制作堆dump文件 4.jstat:性能监控工具 5.jhat:内存分 ...
- boss直聘上看信息 但是不会显示已读
大家在boss直聘上看 想看的boss回你的信息但是又不想显示已读 可以按F12 打开控制台 查找标出文件 查看lastmsg文本里面就是最后一次发你的信息
- HJ92 在字符串中找出连续最长的数字串
描述 输入一个字符串,返回其最长的数字子串,以及其长度.若有多个最长的数字子串,则将它们全部输出(按原字符串的相对位置) 本题含有多组样例输入. 输入描述: 输入一个字符串. 输出描述: 输出字符串中 ...