刚开始学习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. PostgreSQL——服务器配置_{postgresql.conf}

    一.设置参数 所有参数名称都是不区分大小写的 值为字符串时,需要单引号 值为数值时不需要单引号,但带单位时,需要单引号 配置文件(如:postgresql.conf.postgresql.auto.c ...

  2. 从内部重启python脚本

    我有一个基于python的GTK应用程序,可以加载几个模块.它是从(linux)终端运行的,如下所示: ./myscript.py --some-flag setting 用户可以从程序中下载(使用G ...

  3. sql ibatis

    <!-- 写入单位下当前参保人员 --> <insert id="insertTempCaz043" parameterClass="map" ...

  4. tzselect - 选择一个时区

    总览 tzselect 描述 tzselect 程序向用户询问当前位置的信息,把时区描述作为结果输出到标准输出.此结果适合作为环境变量 TZ 的值. 所有与用户的交互是通过标准输入和标准错误输出完成的 ...

  5. http11.Http11OutputBuffer.SocketOutputBuffer.doWrite

    这是一个错误. 我在spring框架中,创建了一个基类SuperBaseController, 并且使用了@ModelAttribute用来给HttpServletRequest和HttpServle ...

  6. 自定义实现系统max方法

    function MyMath(){ //添加了一个方法 this.getMax=function(){ //所有数字中的最大值 var max=arguments[0]; for(var i=0;i ...

  7. vue组件基础之父子传值

    可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...

  8. js实现正则判断手机号

    //判断是否为手机号的正则表达式 function phoneFun(phones){ var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/; if (!myreg.tes ...

  9. JAVA去除抖音视频的水印源码!!!

    @PostMapping("geturl") public DataResponse decodeDouiyin(@RequestBody DouyinRequest req ) ...

  10. 阿里云重磅推出物联网设备身份认证Link ID²

     2018年12月19日,阿里云宣布推出新版物联网设备身份认证Link ID²及物联网安全运营中心Link SOC,护航万物智联.   随着越来越多的设备连接到网络中,随之而来的安全问题越来越突出. ...