Vue 中的props

如果props始终获取不到传过来的值，考虑是否props写多了一个！！！！！！

<template>
  <div>
    {{propA_init}}-{{propA}}
  </div>
</template>

<script>
export default {
    components: {},
  
    props: {
        //必须是数字类型
          propA:Number,
          //必须是字符串或数字类型
          propB:[String,Number],
          //布尔值,如果没有定义，默认值是true
          propC:{
            type:Boolean,
            default:true
          },
          //数字，而且是必传
          propD:{
            type:Number,
            required:true
          },
          //如果是数组，默认值必须是一个函数来返回
          propE:{
            type:Array,
            default:()=>[]
          },
          //如果是对象，默认值必须是一个函数来返回。也可用箭头函数
          propF:{
            type:Object,
            default:function(){
                return {}
            }
          },
          //自定义一个验证函数
          propG:{
              validator:function (value){
                return value>10
             }
          }
    }
  data() {
    return {
      propA_init:this.propA
    };
  },
  mounted() {
    console.log(this.propA_init)
    console.log(this.propA)
  },
  methods:{
    this.propA_init="asdf"
  }
</script>

通常来说，父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。

  但是当父组件的传值是数组或者对象时，子组件中不仅能够直接修改，还不会报错，在子组件中改变这个对象或数组本身将会影响到父组件的状态