VUE学习之props

Props一个Vue单文件组件里面的选项，它接收从父组件传递过来的数据，被称之为静态数据，说道这里肯能就有小伙伴就会疑问什么是静态数据，什么是动态数据，在Vue项目中，在其自实例中，一旦在初始化后props中的数据的类型被定义以后，基于 Vue 是单向数据流，在数据传递时始终不能改变props中的数据类型，所以称其为静态数据，然而在data对象中，在任何情况下，我们都可以随意改变data对象中的数据的类型和结构，不会被任何环境所影响，所以称其为动态数据。 使用props传递数据作用域是孤立的，它是父组件通过模板传递而来，想接收到父组件传来的数据，需要通过props选项来进行接收。 子组件可以显示的声明接收父组件传递来的数据的数量，类型，初始值，这样父组件就只能够传递子组件中声明好的数据类型，否则Vue会抛出一个错误。

//父组件
<template>
  <div class="hello">
      <p >{{tramsmitData}}</p>
  </div>
</template>

<script>
export default {
  name: 'demo',
  props:{
    tramsmitData:{
      type: Number
    }
  }
}
</script>

//子组件
<template>
   <div>
      {{numbera}}
   </div>
   
</template>
<script>

export default {
   name: 'demo',
   props:{
        numbera:{
      type: Number
    }
   }
 
}
</script>

//此时Vue会抛出一个报错
 [Vue warn]: Invalid prop: type check failed for prop "numbera". Expected Number with value NaN, got String with value "父组件传递过来的数据".

found in

---> <Demo> at src/components/scroll.vue
       <Hello> at src/components/scroson.vue
         <App> at src/App.vue
           <Root>

这就是props被称之为静态数据的原因，一旦数据类型被初始化定义好了就不能够再更改；type的类型可以被定义为String，Number，Boolean，Array，Object，Date，Function，Symbol，除了可以设置从父组件接收的数据类型还可以设置从父组件接收的数据的默认值 default，是否为必传required（接收一个布尔值），还可以自定义一个验证函数validator； 对于简单的数据传递在子组件中可以用数据来进行传递，此时在父组件中，数据类型就可以随便传递； 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：就是说父组件里面的数据更新会及时的传递到子组件中，子组件中的数据会随着父组件的改变而改变，但是反过来不行，子组件不能直接改变父组件里面的数据， 这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解，但是有的时候，父组件传递过过来的数据在子组件中不能过直接使用，这个时候我们可以通过子组件中的data进行一个过渡，或者通过子组件的计算属性computed进行一个过滤；

//在子组件中对父组件中传递过来的数据进行一个过渡
props: ['fatherData'],
data: function () {
  return { myMsg: this.fatherData}
}

//对父组件传递过来的数据进行一个过滤
props:['fatherData']
computed : {
   computedMsg () {
       return this.fatherData+ +；
   }
}