props属性传值

1、传具体的值  string(字符串) number(数值) boolean(布尔)

2、传一个引用 array(数组)  object(对象)

----传引用-----

代码

界面效果

删除后的效果

----传一个具体的值-----

        

props 两种传值

1、父组件向子组件传值（属性传值）

2、子组件向父组件传值（事件传值）

属性传值 —— 父（组件）传子（组件）

在子组件中需要接收父组件传过来的属性

事件传值 —— 子传父 $emit

$emit("自己定义的事件名","传的内容")

通过$emit("change","这是子传父的值")注册事件  change为事件名称 后面的为传的内容

触发$emit事件后，会在父组件中查找 对应的 change 事件

vue-属性传值 props的更多相关文章

  1. React Native组件、生命周期及属性传值props详解

    创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...

  2. 组件通过props属性传值

    组件之间的传值 组件是一个单独功能模块的封装,有属于自己的data和methods,一个组件的 data 选项必须是一个函数 为什么必须是函数:因为只有当data是函数时,不同实例调用同一个组件时才会 ...

  3. Vue组件选项props

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...

  4. 10.4 Vue 父子传值

    简单示例 APP.vue <template> <div> <img :src="imgSrc"> <!-- 父子传值 --> &l ...

  5. 【转存】Vue组件选项props

    原帖地址 前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过  ...

  6. Vue组件之props,$emit与$on以及slot分发

    组件实例之间的作用域是孤立存在,要让它们之间的信息互通,就必须采用组件的通信方式  props用于父组件向子组件传达信息 1.静态方式 eg: <body> <div id=&quo ...

  7. vue父子传值与非父子传值

    大概梳理下传值的几种方式 一:父子组件传值 props方式 子组件对外暴露方法并向父组件传递由于触发方法导致的值的变化,父组件接收子组件传递来的值:子组件接收父组件传递来的值,并根据传递来的值在子组件 ...

  8. vue.js实战——props单向数据流

    Vue2.x通过props传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行. 业务中会经常遇到两种需要改变prop的情况, 一种是父组件传递初始值进来,子组件将它作为初始值保存 ...

  9. 12.vue属性.监听.组件

    1.计算属性 https://cn.vuejs.org/v2/guide/computed.html new Vue({ computed:{//定义 show(){ } } }) ++计算属性1.h ...

随机推荐

  1. [luogu1156]垃圾陷阱_动态规划_背包dp

    垃圾陷阱 luogu-1156 题目大意:Holsteins在距离地面D英尺的地方,FJ间隔时间ti会往下扔第i个垃圾.Holsteins对待每一个垃圾都会选择吃掉或者垫高.Holsteins有10个 ...

  2. MSSQL的表备份成INSERT脚本的存储过程

    USE [SupplyChain]GO/****** Object: StoredProcedure [dbo].[ExpData] Script Date: 2015-12-18 10:23:08 ...

  3. Linux - Virsh

    virsh命令 suspend resume dumpxml   KVM平台以存储池的形式对存储进行统一管理,所谓存储池能够理解为本地文件夹.通过远端磁盘阵列(iSCSI.NFS)分配过来磁盘或文件夹 ...

  4. Android 开源框架Universal-Image-Loader全然解析（一）--- 基本介绍及使用

    转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/26810303).请尊重他人的辛勤劳动成果,谢谢! 大家好! ...

  5. 一个效果非常华丽的仿桌面APP，却胜似Launcher

    开发Android APP的同学是否对于Launcher实现的绚丽效果而痴迷呢?什么.连Android Launcher是什么都不知道.好吧,拿起侬的手机.在解锁后的首页界面上左右滑动滑动,体验体验, ...

  6. effective C++ 读书笔记 条款11

    条款11: 在operator= 中处理"自我赋值" 在实现operator=时考虑自我赋值是必要的就像 x=y .我们不知道变量x与y代表的值是否为同一个值(把x和y说成是一个指 ...

  7. Android网络连接监听

    接收系统网络服务的广播接收者 public class NetStateReceiver extends BroadcastReceiver { private Handler handler; pu ...

  8. javascript--给你的JS代码添加单元测试

    通过测试框架为JavaScript应用添加测试,从而保证代码的高质量.这里的笔记例子应用在jaywcjlove/validator.js中. 安装 用到三个工具chai(断言工具),mocha(测试框 ...

  9. linux下sh语法（转载）

    介绍: 1 开头 程序必须以下面的行开始(必须方在文件的第一行): #!/bin/sh 符号#!用来告诉系统它后面的参数是用来执行该文件的程序. 在这个例子中我们使用/bin/sh来执行程序. 当编写 ...

  10. web动画小结

    前端写动画,无非两种方案,一种是通过css,另一种是js css的方案: 1.transform的单独使用 (IE9+) rotate(90deg) 2d旋转,也可以理解为沿着3D的Z轴旋转 rota ...