props的2个特性

　　　　①：父组件通过属性的方式传值（比如下面截图中的content）给子组件，content不会显示在DOM节点中

　　       

　　           

　　　　  ②：父组件向子组件传递值（content），子组件通过props接收后，可在子组件中直接通过{{}}（插值表达式）或this.content获得content中的内容

　　Demo

     <!DOCTYPE html>

<html>

     <head>

           <meta charset="UTF-8">

           <title></title>

           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     </head>

     <body>

           <div id="root">

                <child content="hello world"></child>

           </div>

           <script>

                Vue.component('child', {

                     props: ['content'],

                     template: '<div>{{content}}</div>'

                })

                var vm = new Vue({

                     el: '#root'

                })

           </script>

     </body>

</html>

　　非props的2个特性

　　　　①：父组件向子组件传递值（content），子组件没有用props接收，content会显示在DOM节点中

　　　　  

　　　   

　　　　  ②：父组件通过属性传递值（content），子组件没有通过props接收，此时会报错，提示content没有定义无法使用

　　　　

　　Demo

 <!DOCTYPE html>

<html>

     <head>

           <meta charset="UTF-8">

           <title></title>

           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     </head>

     <body>

           <div id="root">

                <child content="hello world"></child>

           </div>

           <script type="text/javascript">

                Vue.component('child', {

//                  props: ['content'],

                    template: '<div>{{content}}</div>'

                })

                var vm = new Vue({

                     el: '#root'

                })

           </script>

     </body>

</html>

简述vue props和非props的2个特性的更多相关文章

  1. vue组件参数校验与非props特性

    组件参数校验 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <ti ...

  2. 4-3 组件参数校验与非props特性

    本文参考脚本之家,https://www.jb51.net/article/143466.htm 通过属性的形式,父组件对子组件进行参数的传递 //如下图: //父组件设置content属性,向属性中 ...

  3. 【js】 vue 2.5.1 源码学习（五） props directives规范化 props 合并策略

    大体思路 (四) 上节回顾: A: 对于生命周期函数将父子组件的函数放到一个数组里面,特定时间点调用,保证父子组件函数都调用到. B: 对于directive,filters,components 等 ...

  4. 从vue源码看props

    前言 平时写vue的时候知道props有很多种用法,今天我们来看看vue内部是怎么处理props中那么多的用法的. vue提供的props的用法 1. 数组形式 props: ['name', 'va ...

  5. vue中直接修改props中的值并未给出警告，为啥？

    问:vue中直接修改props中的值并未给出警告,为啥? 答:如果props传入的值是引用类型,在子组件中改变其元素,不改变引用,那么不报错: 如果是基本类型,那么在修改时浏览器控制台会有报错信息. ...

  6. [Vue @Component] Pass Vue Render Functions as Props for Powerful Patterns

    Render functions open up a world of customization and control by using pure JavaScript rather than V ...

  7. vue中响应式props办法

    title: vue中响应式props办法 toc: false date: 2018-12-25 21:22:49 categories: Web tags: Vue 更新props数据时,使用th ...

  8. js 实现vue—引入子组件props传参

    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...

  9. [Recompose] Refactor React Render Props to Streaming Props with RxJS and Recompose

    This lesson takes the concept of render props and migrates it over to streaming props by keeping the ...

随机推荐

  1. python之面向对象设计、编程

    面向对象 一.编程三个范式 1.面向过程编程 2.函数式编程 数学层面的函数 python中的函数编程 3.面向对象编程 二.面向对象设计 1.类:把一类事物共同的特征和共同的动作整合在一起就是类: ...

  2. Java语言入门-第一个HelloWorld程序

    1.官网下载Jdk 这里给出官网下载网址:https://www.oracle.com/technetwork/java/javase/downloads . 1.1 打开之后出现如下界面: 1.2选 ...

  3. [08]ASP.NET Core 中 launchsettings.json 启动配置文件

    ASP.NET Core launchsettings.json 启动配置文件 本文作者:梁桐铭- 微软最有价值专家(Microsoft MVP) 文章会随着版本进行更新,关注我获取最新版本 本文出自 ...

  4. mysql常用命令杂记

    查看版本 mysqladmin -uRootmaster -pRootmaster@777 versionselect version() 查看Log_bin是否开启 show variables l ...

  5. swoole中http_server的配置与使用

    swoole中为我们提供了一个swoole_http_server类,方便我们处理http请求. 但是它对http协议的支持并不完整,所以一般建议在前面加一层nginx进行代理,对于php文件的处理交 ...

  6. 如何真正实现由文档驱动的API设计？

    前言 本文主要介绍了一种新的开发思路:通过反转开发顺序,直接从API文档中阅读代码.作者认为通过这种开发方式,你可以更清楚地知道文档表达出什么以及它应该如何实现. 如果单从API文档出发,由于信息量不 ...

  7. 2018-8-10-win10-uwp-关联文件

    原文:2018-8-10-win10-uwp-关联文件 title author date CreateTime categories win10 uwp 关联文件 lindexi 2018-08-1 ...

  8. Python【day 16-1】面向对象初识

    1.面向对象思想 1.面向过程 1.概念 按照事物的发展流程,第一步,第二步,第三步,一步步往下 2.优缺点 1.优点 简单,流水线式的 2.缺点 可扩展性差 2.面向对象 1.概念 对象:是属性和动 ...

  9. [译]Zookeeper的优点与局限性

    1.Zookeeper的优点与局限性 在学习了Zookeeper(后文都简称zk)的介绍和功能后,您已经很好地理解了zk. 现在,在这个zk教程中,我们将讨论zk的优点和局限性. zk有几个功能对用户 ...

  10. 版本管理·玩转git(日志查看与版本切换)

    如果你想更清晰地学习git,你必须要了解3个重要区域. 工作区:即开发者的工作目录 暂存区:修改已被记录,但尚未录入版本库的区域 版本库:存储变化日志及版本信息 当你在工作区进行开发工作时,git会记 ...