props配置项

props配置

功能：让组件接受外部传入的数据

外部传入数据方式

<User :getUserName='getUserName' name='我是爸爸' age='50'></User>

在注册组件实例的同时，自定义属性传入数据，上面就传入了getUserName方法，name和age

组件接受数据

1.第一种方式（普通）

export default {
  props:['getUserName','name','age'],
};

像上面这样仅仅是用props声明接收

2.第二种方式（限制类型）

<script>
export default {
  props:{
    getUserName:Function,
    name:String,
    age:Number
  }
};

这里需要注意一点，age被限制类型为数值型，那么如下传入数值型数据呢？

<template>
  <div id="app">
    <User :age='50'></User>
  </div>
</template>

用v-bind指令绑定age，这样age值就被当作表达式进行解析了

3.第三种方式（限制类型、限制必要性、指定默认值）

<script>
export default {
  name: "User",
  props:{
    getUserName:{
      type:Function
    },
    name:{
      type:String,
      required:true,
    },
    age:{
      type:Number,
      default:50
    }
  },
};
</script>

必要性限制和指定默认值一般不会同时出现，毕竟限制了必要性就没必要指定默认值了

props注意项

1.props是只读的，Vue底层会监测你对props的修改，如果修改了就会发出警告，若业务需求确实需要修改，请复制props的内容到data中一份，然后去修改data中的数据

当你尝试修改props数据：

<template>
  <div>
    <div>方法名：</div>
    <div>姓名：</div>
    <div>年龄：</div>
    <button @click="updateAge">props属性age+1</button>
  </div>
</template>

<script>
export default {
  name: "User",
  props:{
    getUserName:{
      type:Function
    },
    name:{
      type:String,
      required:true,
    },
    age:{
      type:Number,
      default:50
    }
  },
  methods:{
    updateAge(){
      this.age++
    }
  }
};
</script>

在方法updateAge尝试修改props中的age属性，结果报如下警告：
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

意思是如果父组件被重新渲染，props中的属性会被覆盖，并且推荐我们使用computed和data处理props值，像下面这样使用data：

// 展示的时候就不是age了，而是fatherAge
<div>年龄：</div>
<script>
export default {
    data(){
      return{
        // 将props值赋值给data
        fatherAge:this.age
      }
    },
    methods:{
      updateAge(){
        // 方法修改的不是age，而是fatherAge
        this.fatherAge++
      }
  }
}
</script>

从这种方式来看props属性值被初始化的优先级要大于data和computed

2.如果父组件传入的props值动态改变，子组件中也会改变

<template>
  <div id="app">
    <User :age='age'></User>
    <div>父组件中age的值</div>
    <button @click="updateAge">age值++</button>
  </div>
</template>

<script>
import User from './views/User.vue';
export default {
  name: "App",
  components: {
    User
  },
  data(){
    return {
      age:50
    }
  },
  methods:{
    updateAge(){
      this.age++
    }
  }
};
</script>

设计案例如上：自定义属性传入数据对象age，并且父组件中通过方法updateAge动态改变数据对象age的值，子组件如下：

<template>
  <div>
    <div>年龄：</div>
  </div>
</template>

<script>
export default {
  name: "User",
  props:{
    age:{
      type:Number,
    }
  },

};
</script>

子组件直接展示props接收到的外部数据age，经过测试每当父组件中的age动态改变，这边子组件中的props传入值也会动态改变