【Vue2-03】props属性

props配置

功能：让组件接收外部传过来的数据

1. 数据传递：

<Demo name="xxx">

2. 接收数据：

方式一(只接收):
	props: ['name']
	
方式二(限制类型):
	props:{ 
		name: String
	}
方式三(限制类型、限制必要性、指定默认值):
	props:{
		name: {
			type: String, // 类型
			required: true, // 必要性
			default: '张三' // 默认值
		}
	}

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

例子

• Student.vue

<template>
  <div>
      <h1>{{msg}}</h1>
      <h3>我的名字是:{{name}}</h3>
      <h3>我的年龄是:{{age}}</h3>
      <br>
  </div>
</template>

<script>
    export default {
        name: 'Student',
        data() {
            return {
                msg: "我是一个学生",
            }
        },
        props: ['name', 'age']
        /*
        props: {
            name: String,
            age: Number
        }
        props: {
            name: {
                type: String, //限制类型
                required: true, // 限制必要性
                default: '张三' // 指定默认值
            }
        }*/
        
    }
</script>

<style>

</style>

• App.vue

<template>
  <div>
    <!-- 向组件传递数据 -->
    <Student  age="22"></Student>
    <!-- 若要传递动态数据，也可以使用v-bind语法 -->
    <Student name="Michale" :age="32"></Student>
  </div>
</template>

<script>
  // 引入组件
  import Student from './components/Student.vue';

  export default {
    name: 'App',
    // 注册组件
    components: {
      Student,

    }
  }
</script>

<style scoped>

</style>