2.1 Vue组件
Vue组件
- 全局组件和局部组件
- 父子组件通讯-数据传递
父->子:通过Props传递
子->父:不允许,但vue通过子组件触发Emit来提交给子组件进行触发 - Slot
import Counter from './conuter' //导入组件
components:{//注册局部组件
Counter //加载组件
}
<Counter v-bind:num="num"></Counter><!-- 调用组件 v-bind 绑定动态变量 -->
父组件传递到子组件,使用props:["a"]
,使用:a=""
子组传递到父组件,使用$emit("a")
触发,使用@a=""
//父组件
<Modal :mdShow="mdShowCart" @close="mdCloseCart"></Modal>
//子组件.vue
<script>
export default{
props:['mdShow'],//父组件的数据需要通过 prop 才能下发到子组件中
methods:{
mdClose(){
this.$emit('close');//子组件往父组件里传数据通过`emit()`触发,通过emit来触发父组件的方法,相当于jquery里的trigger, 复杂项目用Vuex
},
}
}
</script>
slot
//父组件
<Modal>
<p slot="massage">成功加入购物车!</p>
</Modal>
//Modal组件
<slot name="massage"></slot>
//刷新子组件
<evaluate-list ref="EvaluateList" :fwid="fwid" ></evaluate-list>
<a @click="$refs.EvaluateList.getViewEvaluate();">在线评价</a>
2.1 Vue组件的更多相关文章
- vue组件
分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件 具备一下的几个要求 ...
- vue组件的配置属性
vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...
- vue组件,撸第一个
实现此例您可以学到: vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一.搭建vue开发环境 更换镜像到cnpmnpm ins ...
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- vue组件大集合 component
vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...
- 【Vue】详解Vue组件系统
Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...
- 关于vue组件的一个小结
用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Vue组件模板形式实现对象数组数据循环为树形结构
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...
随机推荐
- 分享一个正则 选择html中所有的单标签
var str = /\B<.+?>/g;
- Thinkpad Access Connections实现快速的在各种网络间进行切换
Thinkpad Access Connections快速的在各种网络间进行切换 因为工作的原因要经常在多个无线或有线之间切换,每次要切换到不同的固定IP地址的网络更是一种折磨,换一次就要从新输入一次 ...
- ES6学习基础
1.let和const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升 { let a = 20; } console.log(a); ...
- Perl线程介绍
Perl 中的线程 本文首先概述了线程的概念和意义,接着回顾了 Perl 语言中对线程支持的演化历史,然后通过一系列示例重点介绍了 Perl 中线程的实现,数据的共享以及线程间的同步,最后归纳并总结了 ...
- 如何更新 CentOS 镜像源
话不多说, 直接上教程. 首先备份/etc/yum.repos.d/CentOS-Base.repo mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.rep ...
- QQ空间说说爬虫
QQ空间说说爬虫 闲来无事,写了一个QQ空间的爬虫,主要是爬取以前的说说,然后生成词云. 这次采用的主要模块是selenium,这是一个模拟浏览器的模块,一开始我不想用这个模块写的,但是后面分析的时候 ...
- FZU 1968 Twinkling lights III
Twinkling lights III Time Limit: 8000ms Memory Limit: 131072KB This problem will be judged on FZU. O ...
- OCP-1Z0-051-题目解析-第27题
27. Which two statements are true regarding tables? (Choose two.) A. A table name can be of any len ...
- 关于getinstalledpackages參数的分析。
此blog不写API的使用方法仅仅分析此參数的知识点. 今天学习安卓突然学习到了getinstalledpackages()的方法获取到安装应用信息 ,他接收一个int flags的值.然后在网上查询 ...
- 【HDOJ 5384】Danganronpa
[HDOJ 5384]Danganronpa AC自己主动机. .. 当时感觉用字典树 标神也往自己主动机想来着..手太生加上时间紧迫也没敲--回来一看题解什么AB同一时候建自己主动机...顿时愣了 ...