标签：ike default ret 基础类型 修改 val javascrip log 默认
组件之间的项目通信在vue中十分常见，父组件的数据传到子组件需要prop的支持，我们来看下prop
1.html的特性名大小写不敏感，浏览器会把所有大写字母解释为小写字母，使用dom模板时，使用等价的kabad-case命名
Vue.component(‘blog-post‘, { // 在 JavaScript 中是 camelCase 的 props: [‘postTitle‘], template: ‘<h3>{{ postTitle }}</h3>‘ })
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
2.prop的类型 prop可以在父组件引入的时候传入很多类型的值
常见的是字符串数组形式
props: [‘title‘, ‘likes‘, ‘isPublished‘, ‘commentIds‘, ‘author‘]
但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object
}
这不仅为你的组件提供了文档，还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。
3.静态传值和动态传值
直接传一句话，或者使用v-bind绑定一个属性名，动态赋值，具体可以参考官网。
4.单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
这是官方的解释，我自己写demo试了一下，如果是基础类型，比如Number、String这些类型，在子组件中修改值，修改成功，但是vue发出警告，因为是单向数据流，所以父组件的值不会改变。如果是引用类型数组和对象，vue没有警告，子组件和父组件的值同时发生改变。
5.prop验证
Vue.component(‘my-component‘, { props: { // 基础的类型检查 (`null` 匹配任何类型) 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‘].indexOf(value) !== -1 } } } })
在prop验证失败，在控制台中有警告。
标签：ike default ret 基础类型 修改 val javascrip log 默认
原文地址：https://www.cnblogs.com/czy960731/p/9524235.html
