props的写法

简写

props: [‘demo-first‘, ‘demo-second‘]

带类型

props: {
    ‘demo-first‘: Number,
    ‘demo-second‘: Number
}

带多种检查

props: {
    ‘demo-first‘: {
        type: Number,
        default: 0
    }
    ...
}

所以, 当你获取不到props的值的时候,可以先仔细检查拼写是否正确。

传值与传字面量

在vue的组件中传递数据,如果是单纯传递字面量,如

<hello result="success"></hello>

那么在hello中获取的props result的值就是“success”,如果希望进行值传递,需要在指令前加 ‘:‘ 冒号,这样,父层的success的值改变,hello的值也会跟着改变。

http://www.tuicool.com/articles/7nYnIba

时间: 2024-08-05 11:14:49

props的写法的相关文章

从vue源码看props

前言 平时写vue的时候知道props有很多种用法,今天我们来看看vue内部是怎么处理props中那么多的用法的. vue提供的props的用法 1. 数组形式 props: ['name', 'value'] 2. 对象形式 对象形式内部也提供了三种写法: props: { // 基础的类型检查 name: String, // 多个可能的类型 value: [String, Number], // 对象形式 id: { type: Number, required: true } } pro

react属性

零:属性 props 属性:是不能被修改的,是由父组件传入的. 一:写法1:<hello name=    ?    > "name1" {123} {"name1"} {1,2,3} {variable} 写法2:var props={ one:"123", two:321 } <hello {...props}/> 直接添加one two属性 <hello {props}/> 得到props对象 写法3:v

React/React Native 的ES5 ES6写法对照表

转载: http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8 英文版: https://babeljs.io/blog/2015/06/07/react-on-es6-plus 很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends

vue 组件属性props,特性驼峰命名,连接线使用

今天在学习vue的时候碰到了一个有趣的问题 是这样的,先来个话题引入,后面会用到 var myname={ 'first-name':'9', 'last-name':'l o n g' } console.log(myname.first-name); console.log(myname['first-name']); 打印出来是  NaN  9 解释下,之所以没有前面没有打印出来9,是因为程序走的时候,把我们认为的英文连接符当做减号看待,myname.first是undefined,nam

总结 React 组件的三种写法 及最佳实践

React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成. 截至目前 React 已经更新到 v15.4.2,由于 ES6 的普及和不同业务场景的影响,我们会发现目前主要有三种创建 React 组件的写法:1. ES5写法React.createClass,2. ES6写法React.Component,3. 无状态的函数式写法(纯组件-SFC). 你们最钟爱哪种写法呢?萝卜青菜各有所爱~ 每个团队都有自己的代码规范和开发模

Vue组件选项props

前面的话 组件接受的选项大部分与Vue实例一样,而选项props是组件中非常重要的一个选项.在 Vue 中,父子组件的关系可以总结为 props down, events up.父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息.本文将详细介绍Vue组件选项props 静态props 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 使用Prop传递数据

动态的计算行高 加载数据源 有多少显示多少 tableView 包含 colloctionView 显示复杂的界面写法

有时候,我们经常碰到这样的需求 先遵守代理 @interface PublishCollectionCell ()<UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout> 创建 _layout = [[UICollectionViewFlowLayout alloc] init]; //        layout.scrollDirection = UICollecti

Component 组件props 属性设置

props定义属性并获取属性值 html <div id="app"> <!-- 注册一个全局逐渐 --> <!-- 注意如果自定义的属性带-像下面这个h-hehe,在props里面就要写驼峰写法,还有反过来就不行,你比如自定义标签用驼峰写法就报错 --> <!-- 可以不绑定属性,那就不用写v-bind了 --> <register v-bind:h-hehe="haha"></register&g

使用 props 传递数据

组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件. "prop" 是组件数据的一个字段,期望从父组件传下来.子组件需要显式地用 props 选项 声明 props: ? 1 2 3 4 5 6 7 Vue.component('child', {  // 声明 props  props: ['msg'],  // prop 可以用在模板内  // 可以用 `this.msg` 设置  template: '&l