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. B - Oulipo

    The French author Georges Perec (1936�C1982) once wrote a book, La disparition, without the letter ' ...

  2. A*算法学习(转)

    A*启发式搜索算法详解 人工智能 1导言 1.1 算法 1.2 Dijkstra算法与最佳优先搜索 1.3 A*算法 2 启发式算法 2.1 A*对启发式函数的使用 2.2 速度还是精确度? 2.3  ...

  3. ZooKeeper常用命令行工具及使用（转）

    一.服务端 bin目录下常用的脚本解释 zkCleanup:清理Zookeeper历史数据,包括食物日志文件和快照数据文件 zkCli:Zookeeper的一个简易客户端 zkEnv:设置Zookee ...

  4. python 类中的方法

    首先,方法是类内部定义的函数,所以方法是类的属性而不是实例的属性. 其次,方法只能在所属的类拥有实例的时候才能被调用.当存在一个实例的时候,我们可以说方法被绑定到实例.如果没有实例,那么我们就说方法是 ...

  5. PHP array_diff()

    定义和用法 array_diff() 函数返回两个数组的差集数组.返回的数组的元素都取自被比较的数组(既第一个数组). 在返回的数组中,键名保持不变. 语法 array_diff(array1,arr ...

  6. Atitit.一个cms有多少少扩展点，多少api&#160;wordpress&#160;&#160;cms有多少api。。扩展点

    Atitit.一个cms有多少少扩展点,多少api wordpress  cms有多少api. . 扩展点 1. Api分类 WordPress APIs 1 1.1. 1 函数分类 2 1.2. 函 ...

  7. update_notifier 造成nodejs进程数量增长的问题

    最近运维老大j哥找到我说了一个事儿:某私有化部署的线上环境nodejs进程数量多达1000+,对比公版线上环境的66个进程数显得十分诡异.并且单个nodejs进程所占用swap空间也较大,也不释放空间 ...

  8. 转：Java阳历转农历

    package cloud.app.prod.home.utils; import java.text.ParseException; import java.text.SimpleDateForma ...

  9. WinForm中的ListBox组件编程

    ListBox组件是一个程序设计中经常使用到的组件,在Visual C#和Visual Basic .Net程序中使用这个组件,必须要在程序中导入.Net FrameWork SDK中名称空间Syst ...

  10. nested exception is java.lang.NoClassDefFoundError: net/sf/cglib/proxy/CallbackFilter

    转自:https://blog.csdn.net/licheng989/article/details/28929411 在Bean中有代码 public abstract Axe getAxe(); ...