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组件的更多相关文章

  1. vue组件

    分享出来让思路更成熟. 首先组件是 Vue.js 最强大的功能之一. 可以减少很多的工作量,提高工作效率. 编写一个可复用性的组件,虽然官网上也有.... 编写可复用性的vue组件 具备一下的几个要求 ...

  2. vue组件的配置属性

    vue组件的声明语法: Vue.component('component-name',{ template:'<p>段落{{prop1}} {{prop2}}</p>', da ...

  3. vue组件,撸第一个

    实现此例您可以学到: vue-cli的基本应用 父组件如何向子组件传递值 单文件组件如何引入scss v-on和v-for的基础应用 源码下载 一.搭建vue开发环境 更换镜像到cnpmnpm ins ...

  4. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  5. JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)

    前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...

  6. vue组件大集合 component

    vue组件分为全局组件.局部组件和父子组件,其中局部组件只能在el定义的范围内使用, 全局组件可以在随意地方使用,父子组件之间的传值问题等. Vue.extend 创建一个组件构造器 template ...

  7. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  8. 关于vue组件的一个小结

    用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...

  9. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  10. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

随机推荐

  1. JS实现PC端全兼容复制

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. linux下,yum 安装mysql

    顺手记录一下安装mysqlclient 先安装mysql-devel yum install mysql-devel 再安装mysqlclient pip3 install mysqlclient 开 ...

  3. [转]LNMP环境下的Web常见问题排查(精品)

    来源:http://mp.weixin.qq.com/s? __biz=MjM5NzUwNDA5MA==&mid=200596752&idx=1&sn=37ecae802f32 ...

  4. ajax动态更新下拉列表

    前面做了一个ajax的小demo,今天看一个动态更新下拉列表,或者也叫级联更新下拉列表,这个也是利用ajax的异步调用去后台实现数据请求.然后回到前台完毕下拉列表数据的更新,以增强web应用的交互性. ...

  5. 【Android】利用自己定义View的重绘实现拖动移动,获取组件的尺寸

    以下利用一个app来说明怎样利用自己定义View的重绘实现拖动移动.获取组件的尺寸. 例如以下图,触摸拖动,或者轻轻点击屏幕都能移动图片.假设碰到文字,则会弹出提示. 这里是利用自己定义View的重绘 ...

  6. C++模板类代码只能写在头文件?

      这个问题,实际上我几年前就遇到了.最近写个模板类玩的时候,再次遇到.   当我非常仔细的将定义和实现分开,在头文件中保留了最少的依赖后,一切就绪.cpp单独编过.但是当使用的时候,就会报告所有的函 ...

  7. js---13 this call apply

    //this:this可以写在js全剧环境中(全局环境中this是window对象),this可以写在函数中,可以写在对象中, function f(){ this.name = "asdf ...

  8. Outlook中设置会议的提醒

    https://support.office.com/en-us/article/Set-or-remove-reminders-7a992377-ca93-4ddd-a711-851ef359792 ...

  9. js插件---Amaze UI dialog如何使用

    js插件---Amaze UI dialog如何使用 一.总结 一句话总结:别人给你列出来的参考手册照着用先 1.在哪里去找插件参考资料或者使用手册(一般位置找不到的时候)? github上面啊,非常 ...

  10. Android studio文件名颜色分别表示含义

    这其实是主要和版本控制工具有关,含义如下: 绿色,已经加入控制暂未提交红色,未加入版本控制蓝色,加入,已提交,有改动白色,加入,已提交,无改动 灰色:版本控制已忽略文件