组件之间的项目通信在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验证失败,在控制台中有警告。
原文地址:https://www.cnblogs.com/czy960731/p/9524235.html
时间: 2024-10-08 02:02:43