vue2 props

props传递值

传入一个静态的值：

<blog-post title="My journey with Vue"></blog-post>

传入一个动态值或者表达式

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post><!-- 动态赋予一个复杂表达式的值 -->
<blog-postv-bind:title="post.title + ' by ' + post.author.name"
></blog-post>
>

传入一个数字：只有v-bind可以使用js表达式

<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>

传入一个布尔值

<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<!--如果是class的话，没有值则不存在-->
<blog-post is-published></blog-post><!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

传入一个数组

<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

传入一个对象

<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-postv-bind:author="{name: 'Veronica',company: 'Veridian Dynamics'}"
></blog-post><!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>

传入一个对象的所有 property
如果你想要将一个对象的所有 property 都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post：下面两者等效，比如这次的preview的属性，传入两个对象，对象的每个属性都是preview的属性，不必每个属性都bind一次，直接bind两个对象就好，这样属性的名字和对象的属性一样，不过更好的做法是在设置prop的时候按照传进来的两个对象设置，这样直接用对象赋值即可

post: {id: 1,title: 'My Journey with Vue'
}
<blog-post v-bind="post"></blog-post><blog-postv-bind:id="post.id"v-bind:title="post.title"
></blog-post>

props传递值的单向流动性

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
所以在子组件使用父组件传入的属性，只允许读不允许写

props: ['initialCounter'],
data: function () {return {counter: this.initialCounter}
}
props: ['size'],
computed: {normalizedSize: function () {return this.size.trim().toLowerCase()}
}

注意：当使用props的值来初始化data时，data的响应式变化不是体现在props值变化data也会变化，而是体现在data值变化会影响引用data的页面数据的变化；回到刚刚，props的值会不会引起data的变化呢？答案是不会。当用props的值来初始化data时，并非用的传进来的响应式变化的值，而是props的default值，如果这个值没有默认初始值，则类型为undefined，如何验证呢？
看下面的一个demo

子组件中，用state的属性值初始化data数据count，其中state的初始值为1（其实无所谓因为后面父组件调用时会传参），并在template中展示state和count的值

父组件中，调用子组件并传入父组件的mystate的data数据，这个mystate可以通过div元素的点击事件调用onclick函数使得mystate跟新，也就是子组件的props参数会更新（这个后续会证明），再通过子组件的输出看是否会导致count变化即可验证。先看结果

开始，mystate的值为3，传入子组件，子组件的props的state值为3，然后赋值给count，count的值也为3.

点击了一次div，调用onclick函数使得mystate的值变为4，传入子组件，自组件的state也变为4，所以证明了上面的子组件的props值确实更新了。但是这里很明显count的值还是3，说明至少count的值没有因为props的更新而变化。
其实也不难得出原因，当用props的值来初始化data时，并非用的传进来的响应式变化的值，而是props的default值，还有一种解释就是，没有办法在data中改变data值，如果想要达到data用props赋值并且随着props的更新而响应式更新，一个做法是不要这个data，直接在调用这个data的地方用{{props}}调用，毕竟此时场景需求下的data和props不是等效的么？如果有复杂一点的对应关系就用computer属性来实现即可。

prop的验证

如下：

Vue.component('my-component', {props: {// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)propA: Number,// 多个可能的类型propB: [String, Number],// 必填的字符串propC: {type: String,required: true},// 带有默认值的数字propD: {type: Number,default: 100},// 带有默认值的对象propE: {type: Object,// 对象或数组默认值必须从一个工厂函数获取default: function () {return { message: 'hello' }}},// 自定义验证函数propF: {validator: function (value) {// 这个值必须匹配下列字符串中的一个return ['success', 'warning', 'danger'].includes(value)}}}
})

基本就是可以基础，可以用数组指定多个可能的类型，可以用require指定必填，用default默认，用validator指定函数类型

注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。
也就是props的初始化不可以用data，compute这些实例的property，后果就是编译不会报错，但是vue会给控制台发出警告，比如下面例子

在props中用data的mystate去初始化myNum，会有mystate没有定义，直接验证了上面的话

非 Prop 的 Attribute

首先是替换和合并已经存在的属性，对于绝大多数 attribute 来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type=“text” 就会替换掉 type=“date” 并把它破坏！庆幸的是，class 和 style attribute 会稍微智能一些，即两边的值会被合并起来，从而得到最终的值：form-control date-picker-theme-dark。
然后是继承问题和如何在非根元素上使用未注册的属性
默认在组件传入一个没在props声明的属性，这个属性会被自动添加到组件的根元素上
如果在组件内部使用 inheritAttrs: false这个property，则上述规则抛弃
但这个只是表示根元素上暂时不会有传进来的没有声明的属性
这时候继承关系可以不管了
取而代之的，我们可以在组件内部任何元素上使用 v-bind="$attrs"来引入传进来的没有声明的属性
在使用了attrs的子元素中如果想要使用属性值，则可以通过$attrs.age来使用，前提是知道继承来的属性名
注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定也就是说在父组件对子组件的 style 和 class 属性进行了设置，那么即使子组件设置了 inheritAttrs: false，这两个属性还是会合并到子组件的根元素上。

vue2 props相关推荐

vue2+vue3——36+
vue2+vue3--36+ 尚硅谷 vue2 vue2 Vue监测数据的原理_数组[18:56] 数组 vue 查看没有 set() get() 对象有 get() set() 监测不到不更新 ...
Vue2 利用 v-model 实现组件props双向绑定的优美解决方案
在项目中开始使用vue2来构建项目了,跟 vue1 很大的一处不同在于2 取消了props 的双向绑定,改成只能从父级传到子级的单向数据流,初衷当然是好的,为了避免双向绑定在项目中容易造成的数据混乱. ...
【Vue2.0】—props 配置（十三）
[Vue2.0]-props 配置(十三) <template><div class="demo"><h1>{{ msg}}</h1> ...
详细讲解vue2组件通信(一)——父传子props
文章结构父组件怎么发送数据子组件怎么接收? 简单接收复杂接收不满足校验规则的一些报错信息(常见于用开源ui组件库时) 数据类型不对必传未传自定义校验函数未通过 props接收的值存在哪? ...
Vue2组件间通信——父传子值props
Vue2组件间通信--父传子值props Vue2中组件间通信系列,本篇是关于父组件向子组件传值的介绍,这里我会用通俗的语言帮助大家理解props配置项功能: 子组件可以接收到父组件传递的数据信息, ...
Vue2.0基本用法之组件的注册和传值(父子props，插槽，$emit)和学写购物车
1.Vue2.0的组件注册组件可以是全局注册和局部注册,全局注册的组件是在其他组件里也可以使用而局部注册的组件只能在该组件里面使用. <body><div id="ap ...
vue2知识点：组件的props属性、非props属性、props属性校验
文章目录 3.10props属性举例:父组件给子组件传递属性msg和greetText,子组件用属性a和b接收,并打印输出 3.11props校验举例 3.12非props属性举例:定义子组件设 ...
Vue2 源码漫游（二）
Vue2 源码漫游(二) 描述: 在(一)中其实已经把Vue作为MVVM的框架中数据流相关跑了一遍.这一章我们先看mount这一步,这样Vue大的主线就基本跑通了.然后我们再去看compile,v-b ...
【Vue.js 牛刀小试】：第九章 - 组件基础再探（data、props）
系列目录地址一.基础知识概览第一章 - 一些基础概念(posted at 2018-10-31) 第二章 - 常见的指令的使用(posted at 2018-11-01) 第三章 - 事件修饰符的 ...