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. PHP TP框架自定义打印函数P

    效果如下,有个灰色背景,也不一定是灰色可以改 代码: //传递数据以易于阅读的样式格式化后输出function p($data){ // 定义样式 $str='<pre style=" ...

  2. PI对于两个SAP客户端通道的了解

    你把你的报文放到ESR的MM里面试一下就知道了 日期格式之类的,可能有转换的你要输入2019-05-13这种 OA到PI不选,都是到一个系统,由PI再来分流 如果你要做成由OA来选的,就要参考类似于  ...

  3. wpf 单例模式和异常处理 （原发布 csdn 2017-04-12 20:34:12）

    第一次写博客,如有错误,请大家及时告知,本人立即改之. 如果您有好的想法或者建议,我随时与我联系. 如果发现代码有误导时,请与我联系,我立即改之. 好了不多说,直接贴代码. 一般的错误,使用下面三个就 ...

  4. EF框架访问access数据库入门(后附官方推荐“驱动”版本)

    vs2017调试通过. 1.添加需要的provider,有点添加驱动的意思.右击项目,NUGET “浏览”,“JetEntityFrameworkProvider”,安装,如图 完成后配置文件(控制台 ...

  5. 多线程学习二：线程池 ExecutorService

    创建线程池的2种方式: 使用线程池方式1--Runnable接口: 通常,线程池都是通过线程池工厂创建,再调用线程池中的方法获取线程,再通过线程去执行任务方法. Executors:线程池创建工厂类: ...

  6. SAP HUMO VLMOVE不支持E库存发货到成本中心

    SAP HUMO VLMOVE不支持E库存发货到成本中心 如下HU 194810300235,里面物料的库存是E库存, 执行VLMOVE,试图将该HU整托发货到成本中心, 输入成本中心后,点击按钮'P ...

  7. 安装quickLook插件以及解决如何不能读取offic问题

    目录 @(安装quickLook插件) quickLook插件是Mac上的快速浏览的一个功能,现在win10系统上也能安装插件,这个插件可以快速浏览txt,doc,图片,表格等文件如下图: 我认为最方 ...

  8. Shell命令-搜索文件或目录之whereis、locate

    文件及内容处理 - whereis.locate 1. whereis:查找二进制命令,按环境变量PATH路径查找 whereis命令的功能说明 whereis 命令用于查找文件.该指令会在特定目录中 ...

  9. python 2.7 操作mysql数据库 实例

    create table msg(id int primary key auto_increment,title varchar(20),name varchar(60),content varcha ...

  10. day74_10_21 三大认证

    一.权限六表. 一般在django中,基于用户权限访问控制的认证是RBAC(Role-Based Access Control) 还有一些基于auth的认证规则. Django框架采用的是RBAC认证 ...