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. HDU 5467

    第一次写LCT,各种模板加入...以后都只遇到有新意的题目再更新了 这道题就是LCT,但是,难在一个回退的操作.这时,可以通过改变执行顺序,先把要回退后再做的操作先执行了,再回退到之前的执行.这时,建 ...

  2. Apache模块开发指南-APR池

    转:原文: http://blog.csdn.net/zmxiangde_88/article/details/8038150 ------------------------------------ ...

  3. gcc动态链接库so的制作和使用

    http://blog.csdn.net/CSqingchen/article/details/51546784 参考: http://blog.sina.com.cn/s/blog_69e96b37 ...

  4. NGINX之——配置HTTPS加密反向代理訪问–自签CA

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46695495 出于公司内部訪问考虑,採用的CA是本机Openssl自签名生成的,因 ...

  5. Xposed获取微信usernamepassword

    请关注我的微信公众号 參考文章:Xposed恶意插件 Android 安全专项-Xposed 劫持usernamepassword实践 0x00 我在之前的文章中演示了一下怎样通过Xposed获取us ...

  6. 线段树+离线 hdu5654 xiaoxin and his watermelon candy

    传送门:点击打开链接 题意:一个三元组假设满足j=i+1,k=j+1,ai<=aj<=ak,那么就好的.如今告诉你序列.然后Q次询问.每次询问一个区间[l,r],问区间里有多少个三元组满足 ...

  7. @RestController注解的使用

    示例代码:/*@ResponseBody@Controller*/@RestControllerpublic class HelloController { @RequestMapping(" ...

  8. WCF学习笔记——不支持内容类型 text/xml; charset=utf-8

    我在使用WCF的时候,客户端运行报错: 不支持内容类型 text/xml; charset=utf-8 原因是WCF服务做了修改.刷新客户端的服务引用,问题消失 =================== ...

  9. Git Stash方法

    命令:git stash1.使用git stash 保存当前的工作现场, 那么就可以切换到其他分支进行工作,或者在当前分支上完成其他紧急的工作,比如修订一个bug测试提交. 2.如果一个使用了一个gi ...

  10. SpringMVC使用POST方法传递数据，却出现Request method 'GET' not supported？

    转自:https://segmentfault.com/q/1010000011245770 问题:没有使用get获取当前页面解决方案:   @RequestMapping(value = " ...