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. Spring Boot使用thymeleaf模板时报异常：template might not exist or might not be accessible by any of the configured Template Resolvers

    错误如下: template might not exist or might not be accessible by any of the configured Template Resolver ...

  2. hdu4430之枚举+二分

    Yukari's Birthday Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  3. 【NOIP2018】为什么这么无力啊

    菜鸡又要爆零了 辛辛苦苦背板子结果考时候脑子一片空白 第一题线段树调了半小时 看完三道题两道写暴搜一道写暴力(说是暴搜,觉得更像写了个背包) 别提暴搜还忘记剪枝. . . . . . 我觉得考场上最菜 ...

  4. CreateWindowEx和CreateWindow的区别

    CreateWindowEx 函数功能:该函数创建一个具有扩展风格的重叠式窗口.弹出式窗口或子窗口,其他与 CreateWindow函数相同.关于创建窗口和其他参数的内容,请参看CreateWindo ...

  5. 一段程序的人生 第10章： server

    从第0章開始看 第拾章 server     一切基本安顿下来,我開始认真的检阅一下我所栖身的文件夹.来到了外面的大世界,果然不一样.越是细致查看越是认为这里真是一个再好只是的地方. 这个文件夹里面有 ...

  6. luogu3225 [HNOI2012]矿场搭建

    题目大意 给出一个有$n(n\leq 500)$个节点的无向图,一个满足条件的点集$V$会使得对于图中的每一个节点$u$,满足路径起点为$u$终点$v\in V$的路径集合$P_u$中总存在至少两条路 ...

  7. mtools 是由MongoDB 官方工程师实现的一套工具集，可以很快速的日志查询分析、统计功能，此外还支持本地集群部署管理.

    mtools 是由MongoDB 官方工程师实现的一套工具集,可以很快速的日志查询分析.统计功能,此外还支持本地集群部署管理 https://www.cnblogs.com/littleatp/p/9 ...

  8. [python 基础]python装饰器(一)添加functools获取原函数信息以及functools.partial分析

    python装饰器学习的时候有两点需要注意一下 1,被装饰器装饰的函数取其func.__name__和func.func_doc的时候得到的不是被修饰函数的相关信息而是装饰器wrapper函数的doc ...

  9. C#,Java,MD5加密对等实现

    1.c#实现 /* *加密生成MD5 */ public static String MD5(string s) { ', 'a', 'b', 'c', 'd', 'e', 'f' }; MD5 md ...

  10. RabbitMQ安装后，BADARG问题

    最近RabbitMQ安装后始终不能运行,发现异常关键信息如下 =CRASH REPORT==== 10-Nov-2017::13:41:09 === crasher: initial call: ap ...