Vue2——props配置

需求

一个展示学生信息的组件
Student.vue:

<template>
    <!-- 组件的结构,相当于非单文件中的  template配置-->
    <div class="demo">
        <h2>名字:{{name}}</h2>
        <h2>年龄:{{ age }}</h2>
    </div>
</template>
<script>
// 组件交互的代码（数据、方法），相当于非单文件中的出了template的配置
export default {
    name:'StudentVue',
    data() {
        return {
            name: "yang",
            age: 18,
        };
    },
}

</script>
<style>

/* 组建的样式 */
.demo{
    background: green;
}
</style>

APP.VUE:

<template>
  <div>
    <Student/>
  </div>
</template>
<script>
//引入组件
import Student from './components/Student'
export default {
  name: 'App',
  components: {
    Student
  },
  data() {
    return {
      msg:"欢迎！！！"
    }
  },

}
</script>

<style>
</style>

输出：

需求：学生页面的数据是动态传入的，而不是写死的——引入props配置

props配置

App.vue传入数据的时候通标签的属性传入，
Student.vue中通过 props配置进行引入。

• 注意: 传递的属性名要和props配置的接收的名字要一致。

props配置简单接收——数组形式

props: ['属性名','属性名']

app.vue;

<template>
  <div>
    <Student name='张三' age="20"/>
  </div>
</template>
<script>
//引入组件
import Student from './components/Student'
export default {
  name: 'App',
  components: {
    Student
  },
  data() {
    return {
      msg:"欢迎！！！"
    }
  },

}
</script>

<style>
</style>

student.vue

<template>
    <!-- 组件的结构,相当于非单文件中的  template配置-->
    <div class="demo">
        <h2>名字:{{name}}</h2>
        <h2>年龄:{{ age }}</h2>
    </div>
</template>
<script>
// 组件交互的代码（数据、方法），相当于非单文件中的出了template的配置
export default {
    name:'StudentVue',
    props: ['name','age']
}

</script>
<style>

/* 组建的样式 */
.demo{
    background: green;
}
</style>

props配置接收——对象形式

可以对接收参数的数据格式进行限制：

    props: {
        name: String,
        age:Number
    }

props配置接收——对象形式2

可以对接收参数的数据格式进行限制，同时可以限制属性是否是必需的，也可以设置默认值

    props: {
        name: {
            type: String,
            required:true,
        },
        age: {
            type: Number,
            default:99
        },
       
    }

props配置分析

• 通过props配置接受的属性最终配置在组建的实例对象上（vc）
• 传入数据的时候通标签的属性传入,即属性="值"，所以默认情况下传过去的属性值都是字符串，如果想要传过去number值，可以靠v-bind实现
  <Student name='张三' :age="20"/>
:age="20"会将 "20"解析成js表达式，表达式的结果就是number类型的20，所以传过去的值就是number类型的18.
• propos可以对传入的属性值的类型进行限制
• propos传过来的属性不能修改
  props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

若要修改props传过来的属性，需要这样写：

<template>
    <!-- 组件的结构,相当于非单文件中的  template配置-->
    <div class="demo">
        <h2>名字:{{name}}</h2>
        <h2>年龄:{{ myAge }}</h2>
        <button @click="addAge">点击年龄修改</button>
    </div>
</template>
<script>


// 组件交互的代码（数据、方法），相当于非单文件中的出了template的配置
export default {
    name:'StudentVue',
    data() {
        console.log(this)
        return {
            myAge:this.age
        }
    },
    props: {
        name: {
            type: String,
            required:true,
        },
        age: {
            type: Number,
            default:99
        },
       
    },
    methods: {
        addAge() {
            this.myAge++
        }
    }
}

</script>
<style>

/* 组建的样式 */
.demo{
    background: green;
}
</style>

props的优先级

props的优先级比较高，高于data(){}配置

未接收的props

父组件在组件标签中传递属性，子组件使用props接受属性。
父组件：

  <div>
    <Student name='张三' :age="20"/>
  </div>

子组件：

props: ['name','age'],

• 正常情况下由props接收从父组件传递管来的参数，并且将参数放在组件实例对象上。
• 但是如果不接收的话会存储在组件实例对象上的$attrs属性上，如果接受了就不会存储在$attrs属性上了。