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. iOS: 导航栏显示默认后退按钮

    要显示系统默认的后退按钮(非自定义)的语句如下: [[self navigationController] setNavigationBarHidden:NO animated:YES];self.n ...

  2. Android Studio第一次启动的Fetching android sdk component information的问题

    1)进入刚安装的Android Studio文件夹下的bin文件夹.找到idea.properties文件,用文本编辑器打开. 2)在idea.properties文件末尾加入一行: disable. ...

  3. AOP代理分析

    一:代理 代理类和目标类实现了同样的接口.同样的方法. 假设採用工厂模式和配置文件的方式进行管理,则不须要改动client程序.在配置文件里配置使用目标类还是代理类,这样以后就非常easy切换.(比如 ...

  4. 数据结构之---C语言实现最短路径之Dijkstra(迪杰斯特拉)算法

    此处共同拥有两段代码: 一. 这段代码比較全面,当中參考了github上的相关源代码. 能够说功能强大. //Dijkstra(迪杰斯特拉算法) #include <stdio.h> #i ...

  5. luogu1373 小a和uim之大逃离

    题目大意 地面上出现了一个n*m的巨幅矩阵,矩阵的每个格子上有一坨0~k不等量的魔液.怪物各给了小a和uim一个魔瓶,说道,你们可以从矩阵的任一个格子开始,每次向右或向下走一步,从任一个格子结束.开始 ...

  6. bootstrap异步加载树后样式显示问题

    整个过程: 1.先加载整个页面 2.通过jquery异步请求后台返回数据 3.循环遍历数据,拼接需要的内容 4.把拼接好的数据加载到页面中. 问题: 把拼接好的内容加载到页面后,样式显示不正确.而如果 ...

  7. BZOJ1067 [SCOI2007]降雨量 RMQ???

    求救!!!神犇帮我瞅瞅呗...未完...调了2个半小时线段树,没调出来,大家帮帮我啊!!! 小詹用st表写. 我的思路就是把中间空着的年份设为无限,然后一点点特判就行了...然而没出来... [SCO ...

  8. Device /dev/sdb1 not found (or ignored by filtering)

    /etc/lvm/lvm.conf filters

  9. JDK5.0新特性(静态导入、自动装箱/拆箱、增强for循环、可变参数、枚举、泛形)

    JDK5中新增了很多新的java特性,利用这些新语法可以帮助开发人员编写出更加高效.清晰,安全的代码. 这些新特性主要有:1.静态导入2.自动装箱/拆箱3.增强for循环4.可变参数5.枚举6.泛型7 ...

  10. hdu3652B-number(数位dp)

    B-number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...