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. JeeSite | 保存信息修改记录

    需求点 在很多场景中信息是不能轻易被修改的,修改时要么需要具备权限,要么需要审批,但是无论是哪种方式,修改前后的数据都是需要留有“案底”的,也就是说关键的信息被修改后是有修改记录的,一般修改记录会记录 ...

  2. EJB学习

    EJB:企业级JavaBean(Enterprise JavaBean, EJB)是一个用来构筑企业级应用的服务器端可被管理组件. EJB主要有三种Bean: Session Beans: 会在单个特 ...

  3. http服务源码分析

    多读go的源码,可以加深对go语言的理解和认知,今天分享一下http相关的源码部分 在不使用第三方库的情况下,我们可以很容易的的用go实现一个http服务, package main import ( ...

  4. Java开发桌面程序学习（六）——拖动文件获得文件路径

    拖动获得文件路径 在windows软件中,很多软件都提供了拖动文件的打开文件的功能,JavaFx中也是有这功能,是通过监听器来实现的 监听器 setOnDragDetected(new EventHa ...

  5. 做一个vue轮播图组件

    根据huangyi老师的慕课网vue项目跟着做的,下面大概记录了下思路 1.轮播图的图 先不做轮播图逻辑部分,先把数据导进来,看看什么效果.在recommend组件新建一个recommends的数组, ...

  6. 6.JavaCC官方入门指南-例1

    例1:整数加法运算   在这个例子中,我们将判断如下输入的式子是否是一个合法的加法运算: 99 + 42 + 0 + 15   并且在输入上面式子的时候,数字与加号之间的任何位置,都是可以有空格或者换 ...

  7. Mysql添加用户与授权

    1.本地环境 CentOS Linux release 7.5.1804 (Core) mysql Ver 14.14 Distrib 5.7.22, for Linux (x86_64) using ...

  8. .net core从版本 3.0 迁移到 3.1引发的BUG

    前几天微软的.net core3.1发布后,随把visual studio 2019升级到16.4.1版本并把项目进行框架升级.升级后的项目在IdentityServer4授权后在360安全浏览器竟然 ...

  9. MASK-RCNN(1)

    MASK-RCNN是一个多用途的网络,可以用来做目标检测,实例分割或者人体姿态识别.主要结构如下. 简单的说,就是首先用Faster-RCNN获得ROI,再进行ROI Align,然后输出ROI的分类 ...

  10. webstorm的git操作使用

    0. 前言 在上一篇文章中,讲述了使用webstorm去调试node程序,最近研究了一下如何使用webstorm去操作git. 对于git的使用,大家的使用方式均有不同,最王道的方式非命令行莫属,基于 ...