Vue-父子组件间通信-props个人笔记

一 props的值有两种方式：

1.字符串数组，数组中的字符串就是传递时的名称。

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

2.对象，对象可以设置传递时数据的类型，也可以设置默认值等，即Vue官方文档中的props数据验证。

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

二 静态props和动态props

1.静态props 父组件向子组件传递数据，子组件props中定义的属性名在父组件标签中直接作为属性使用，父组件中该属性的属性值为静态的值（官方文档这么说），也就是属性值作为字符串传入到子组件中.

子组件中：

 props:{
      path:String,
      activeColor:{
        type:String,
        default:'red'
      }
    }

父组件中:

<parentag path="/home" activeColor="deepPink"></parentag>

这样父组件标签的path和activeColor中的值就传到了子组件中。

2.动态props

通过V-bind动态地将父组件的数据传给子组件，属性值中的值作为变量传到子组件中。

<!-- 动态赋予一个变量的值 -->
<blog-post  :title="post.title"></blog-post>