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.给文件传输助手发一条消息 import itchat itchat.auto_login(enableCmdQR=True) # 这里需要你人工手机扫码登录 itchat.send('Hello, ...

  2. pandas 学习 第3篇：Series - 数据处理（应用、分组、滚动、扩展、指数加权移动平均）

    序列内置一些函数,用于循环对序列的元素执行操作. 一,应用和转换函数 应用apply 对序列的各个元素应用函数: Series.apply(self, func, convert_dtype=True ...

  3. 3DES对称加密算法（ABAP 语言实现版）

    公司人事数据要求在系统间加密传输,而对接系统大部分是Java系统,要在不同的异构系统间能很好的加解密码,想到了标准的对称加密算法DES,因为是标准的算法,网络上存在大量公开用Java的DES算法,JA ...

  4. C# QRBarCode

    1. install-package barcode -v 4.0.2.2; 2. using IronBarCode; class Program { static void Main(string ...

  5. 简单解决 VMWare “无法打开内核设备:\\Global\\vmx86”错误

    在“服务”后右击选择使用管理员打开.然后在一大串服务中找到vm开头的服务项,全部都启动.重新启动vm就ok了(vm需要以管理员身份打开).

  6. python验证码识别(2)极验滑动验证码识别

    目录 一:极验滑动验证码简介 二:极验滑动验证码识别思路 三:极验验证码识别 一:极验滑动验证码简介   近些年来出现了一些新型验证码,不想旧的验证码对人类不友好,但是这种验证码对于代码来说识别难度上 ...

  7. liunx简单命令

    mysql -h主机地址 -u用户名 -p用户密码 --进入数据库1.显示数据库列表. show databases; 2.显示库中的数据表: use mysql: //打开库 show tables ...

  8. LinuxShell脚本——函数

    LinuxShell脚本——函数 摘要:本文主要学习了Shell中函数的定义和使用. 函数的定义 Shell函数的本质是一段可以重复使用的脚本代码,这段代码被提前编写好了,放在了指定的位置,使用时直接 ...

  9. VUE基础实用技巧

    Vue以前听说过,有了解过一点.当时还在热衷于原生JavaScript去写一些方法的封装,不是为啥,就感觉这样很帅,后面多多少少接触了一些JQuery的用法,到现在为止,JavaScript原生封装的 ...

  10. JavaWeb之Servlet(3)

    Servlet(3) HttpServletRequest 该类的对象封装了所以客户端提交过来的数据 获取所有请求头数据 public java.util.Enumeration<E> g ...