Vue.js parent-child component communication

Parent-child component communication

Understanding:
Why is the data option a function?
A component is an aggregate and a whole. It needs an independent function space, that is, its data needs to be independent. At present, the biggest feature of js is functional programming, and the function just provides an independent scope, so we Data is a function outside the root component.
Understanding: Why does the data function need to return a return value? The return value is still an object, not an array?
Vue uses the Object.definePerproty property of es5 to set the getter and setter of an object, and the data option is an option for Vue to go deep into the responsive core.
Process

The parent component binds its own data with v-bind to the child component, and the
child component receives it through the props attribute

<template id="father">
    <div>
        <h3> 这里是father </h3>
        <Son :money = "money"></Son>
    </div>
</template>

<template id="son">
    <div>
        <h3> 这里是son </h3>
        <p> 我收到了父亲给的  </p>
    </div>
</template>

<script>
  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        money: 10000
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    props: ['money']
  })

  new Vue({
    el: '#app'
  })
</script>

Props attribute data verification
Verify data type
Verify data size [Judgment condition]

// props: ['money']
// 数据验证
// props: {
//   'money': Number 
// }
props: {
    'money': {
        validator ( val ) { // 验证函数
            return val > 2000
        }
    }
}

At work: Third-party verification
TypeScript [TS]
plug-in vue-validator, etc.