vue-props配置

1.props作用

props主要用于组件实例对象之间传递参数，比如我们前面创建的student组件，我们在组件中让他显示一些信息，比如下面这样：

Student组件如下：

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      msg: "我是学生组件",
      name:'张三',
      age:'12',
    };
  },
};
</script>

然后我们在APP组件中引用就能显示上面的图

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Student></Student>
  </div>
</template>

<script>

import Student from './components/Student'

export default {
  name: 'App',
  components: {
  
    Student
  },
  data() {
    return {
      msg:'欢迎'
    }
  },

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

问题是，如果我每次使用Student组件，他显示的名字都是张三，这在实际开发中肯定不合适，在实际开发中，我们一般需要将姓名年龄等作为参数传入到组件中，然后显示出具体的实例化对象后的内容。

那么就需要用到我们今天介绍的props属性

我们把App.vue改造成下面这样:

我们在Student组件中通过 name=’张三’这种形式传值，然后在Student组件中接收数据

通过这样的配置，就能显示不同的信息了

2.props的形式

props配置项有几种形式，第一种就是上面数组形式：

  props:['name','age']

这种形式的问题很简单，就是默认传递数据是原值，一般不能修改，比如我们想把传的年龄加2，如果写成{{age+2}} ，那么输出的就是字符串，而不是表达式，为了解决这个小问题，可以在调用的时候，加入冒号，比如下面这样：

APP.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Student name='张三' :age='15'></Student>
    <Student name='李四' age='11'></Student>
  </div>
</template>

<script>

import Student from './components/Student'

export default {
  name: 'App',
  components: {
    Student
  },
  data() {
    return {
      msg:'欢迎'
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Student.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age+1}}</h2>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      msg: "我是学生组件",
    };
  },
  //props
  //方式1：
  props:['name','age']
};
</script>

效果如下：

第二种：

  props:{
    name:String,
    age:Number,
  }

这种方式可以写成对象类型，这种方式可以提示类型，如果传的类型不一致就会报错。

第三种：

props:{
    name:{
      type:String,  //类型
      required:true, //表示是否必须的
    },
    age:{
      type:number,
      default:50, //如果没传时的默认值
    }
  }

3.修改参数的值

vue并不希望我们去直接修改参数的值，但是我们可以间接去修改。比如下面这样：

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>姓名：{{myName}}</h2>
    <h2>年龄：{{age+1}}</h2>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      msg: "我是学生组件",
      myName:this.name
    };
  },
  //props
  //方式1：
  // props:['name','age']
  //方式2
  props:{
    name:{
      type:String,  //类型
      required:true, //表示是否必须的
    },
    age:{
      type:Number,
      default:50, //如果没传时的默认值
    }
  }

};
</script>

我们在data中通过myName接收了传过来的参数，有了myName后，就可以随便修改了。