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. myeclipse git 上下箭头表示什么

    myeclipse git 上下箭头表示什么? 向上箭头表示本地有提交(commit),但是还没有推(push)到远程代码库中,旁边的数字表示本地commit的次数: 向下箭头表示你拉(fetch)下 ...

  2. [ javascript ] getElementsByClassName与className和getAttribute!

    对于javascript中的getElementsByClassName 在IE 6/7/8 不支持问题. 那么须要模拟出getElementsByClassName  须要採用className属性 ...

  3. 【原创】TCP超时重传机制探索

    TCP超时重传机制探索 作者:tll (360电商技术) 1)通信模型 TCP(Transmission Control Protocol)是一种可靠传输协议.在传输过程中当发送方(sender)向接 ...

  4. 将byte[]转为各种进制的字符串

    /**      * 将byte[]转为各种进制的字符串      * @param bytes byte[]      * @param radix 基数可以转换进制的范围(2-36),从Chara ...

  5. 蒟蒻的trie树专题

    POJ 3630 Phone List: 模板 ///meek #include<bits/stdc++.h> using namespace std; using namespace s ...

  6. luogu2320 鬼谷子的钱袋

    题目大意 鬼谷子决定将自己的金币数好并用一个个的小钱袋装好,以便在他现有金币的支付能力下,任何数目的金币他都能用这些封闭好的小钱的组合来付账.求钱袋数最少,并且不有两个钱袋装有相同的大于1的金币数的装 ...

  7. hdoj--5630--Rikka with Chess（规律题）

     Rikka with Chess Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Othe ...

  8. B1303 [CQOI2009] 中位数图 数学

    想明白算法之后特别水,因为b只有可能出现一次,所以直接在b的左右找就行了,比他大的为1,比他小的为-1,然后维护前缀和就行了. 假如b有可能出现多次呢?按照这种方法好像也很好办,就是枚举每个点就行了, ...

  9. 269D

    扫描线+dp 先对坐标排序,然后·用set维护端点,每次插入左端点,扫描到右端点时删除.每次考虑新插入时分割了哪两个木板,自己分别连边,再删除原来的边,最后dp(好像得维护used,有环) #incl ...

  10. King(差分约束)

    http://poj.org/problem?id=1364 题意:输入i,n,gt(lt),k; 判断是否存在这样一个序列,从第 i 项加到第 n+i 项的和 <(lt) k 或 >(g ...