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. gRPC+gRPC Gateway+swagger小记

    前言 本文记录了grpc-gateway的简单使用. 定义proto 先来看看最常规的 syntax = "proto3"; package protos; service Gre ...

  2. 3、Hibernate的多表关联

    一.数据库中的表关系: 一对一关系 一个人对应一张身份证,一张身份证对应一个人,一对一关系是最好理解的一种关系,在数据库建表的时候可以将人表的主键放置与身份证表里面,也可以将身份证表的主键放置于人表里 ...

  3. C# 矢量图EMF 总结

    个人知识记录.如果有用请点赞,否则勿喷.忽略. 个人站点:https://i.cnblogs.com/EditPosts.aspx?opt=1 注意:句柄的操作1.创建 代码如下: Metafile ...

  4. python基础(9):基本数据类型四(set集合)、基础数据类型补充、深浅拷贝

    1. 基础数据类型补充 li = ["李嘉诚", "麻花藤", "⻩海峰", "刘嘉玲"] s = "_&qu ...

  5. 猪肉涨价飞快？让我们用python来预测一下今年最后一个月的猪肉价格吧！

    今天我们将使用Facebook的“先知”模型来预测2019年12月广东省的猪肉价格,本实验仅供参考. 1.准备数据 在猪价系统网站上利用开发者工具获得过去一年广东省的猪肉价格保存为json格式:htt ...

  6. DataGridView中在新增行时怎样设置每个Cell单元格的字体样式

    场景 DataGridView怎样实现添加.删除.上移.下移一行: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10281414 ...

  7. [b0029] python 归纳 (十四)_队列Queue实现生产者消费者

    # -*- coding: UTF-8 -*- """ 多线程的生产者,消费者 使用队列Queue """ import Queue imp ...

  8. DataGuard搭建逻辑StandBy

    DataGuard搭建逻辑StandBy 原创 作者:bayaim 时间:2016-03-31 17:23:48 272 0删除编辑   物理StandBy优点是效率高,缺点是只读模式不能恢复,恢复模 ...

  9. DOS（磁盘操作系统）基本命令-思维导图

  10. qt md5加密，base64编码解码

    qt md5加密,base64编码解码 md5加密 QByteArray data = "12121221"; data += "asdfas"; QByteA ...