刚开始学习vue组件的时候经常被 props这个传值搞晕,做个笔记

Vue.component('item', {
template: '#item-template',
props: {
model: Object
}
}) var demo = new Vue({
el: '#demo',
data: {
treeData: data
}
})
<ul id="demo">
<item
class="item"
:model="treeData">
</item>
</ul>
props可以是字符串也可以是对象, 如果组件里面需要穿对象,我们调用的时候就可以使用 :model=object  model对应组件中props中的model,  object 对象必须是 父级 data中的一个对象属性

vue组件的props的更多相关文章

  1. Vue组件选项props

    前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props ...

  2. 【转存】Vue组件选项props

    原帖地址 前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过  ...

  3. Vue组件之props,$emit与$on以及slot分发

    组件实例之间的作用域是孤立存在,要让它们之间的信息互通,就必须采用组件的通信方式  props用于父组件向子组件传达信息 1.静态方式 eg: <body> <div id=&quo ...

  4. vue 组件属性props,特性驼峰命名,连接线使用

    网址:https://www.cnblogs.com/alasq/p/6363160.html 总结如下:vue的组件的props属性支持驼峰命名,不支持连接线命名,使用是用连接线进行赋值或者数据绑定 ...

  5. 第七十二篇:Vue组件的props

    好家伙, 1.组件的props props是组件的自定义属性,在封装通用组件的时候,合理的使用props可以极大的提高组件的复用性 来假设一下,如果我们需要两个组件分别显示不同的值 目录结构如下: H ...

  6. vue 组件开发 props 验证

    使用props 在Vue中父组件向子组件中传送数据是通过props实现的,一个简单的使用props的例子: <!DOCTYPE html> <html> <head> ...

  7. vue组件之属性Props

    组件的属性和事件 父子组件之间的通信 父子组件之间的通信就是 props down,events up,父组件通过 属性props向下传递数据给子组件,子组件通过 事件events 给父组件发送消息. ...

  8. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  9. Vue组件-组件的属性

    在html中使用元素,会有一些属性,如class,id,还可以绑定事件,自定义组件也是可以的.当在一个组件中,使用了其他自定义组件时,就会利用子组件的属性和事件来和父组件进行数据交流. 比如,子组件需 ...

随机推荐

  1. ALSA 更改默认声卡

    用 aplay -l 看一下各声卡的配置信息 创建 /etc/asound.conf,根据 aplay -l  的输入,选择需要的声卡信息,按如下格式添入,即可更改默认声卡 defaults.pcm. ...

  2. Java DOM解析器

    文档对象模型是万维网联盟(W3C)的官方推荐.它定义了一个接口,使程序能够访问和更新样式,结构和XML文档的内容.支持DOM实现该接口的XML解析器. 何时使用? 在以下几种情况时,应该使用DOM解析 ...

  3. redis集群创建时报错:Sorry, can't connect to node

    1.redis集群创建时报错:Sorry, can't connect to node ip,端口等都配置正确的话,还需要将redis.conf文件中的密码注释掉    # requirepass 1 ...

  4. MacOS安装npm全局包的权限问题

    MacOS,安装npm全局包提示没有写入权限: npm WARN checkPermissions Missing write access to /usr/local/lib/node_module ...

  5. html5本地存储(一)------ web Storage

    在html5中与本地存储相关的两个相关内容:Web Storage  与本地数据库 web Storage存储机制是对html4中的cookie存储机制的一个改善.web Storage就是在web上 ...

  6. 从可变长函数到legb

    可变长参数 * *形参 用元组接收接收多余的位置实参 约定俗成形参名为 *args def f1(*args):#调用函数时,有多少个参数我就接收多少个 res = 0 for num in args ...

  7. LVS DR模拟实验

    准备多台服务器,现以三台服务器为例第一台做调度器 192.168.200.111[root@localhost ~]# iptables -F[root@localhost ~]# setenforc ...

  8. linux redis的启动---后台启动

    1.启动redis服务: redis-server 如果想要开启后台进程: 1.找到redis.conf里边的 把no 改为yes. 2.redis-server redis.conf(这个是针对两个 ...

  9. 改变this 指向的3种方法

    1.在函数内部声明一个that,然后将this赋值给that, var that=this; 最后用that 代替this使用 <!DOCTYPE html> <html lang= ...

  10. Delphi ADOQuery的属性 locktype、CursorLocation 、Filter、CursorType、CancelBatch 和 UpdateBatch

    以下数据,部分来自网络的收集,部分为自己测试后的原创整理,希望对你有帮助,更新会注明日期. 1.locktype  指定用户打开数据集时对数据集的锁定级别: ltUnspecified   未指定锁定 ...