[JavaScript知识库]Vue-prop属性

1.定义

让组件接受外部传过来的数据

? (1).传递数据:

?

? (2).接收数据:

? 方式一(只接收，不进行其他的配置)

? props:[‘name’]

? 方式二(限制类型)

?

	props:{
?				name:String
?			}

? 方式三(限制类型、限制必要性、指定默认值)

props:{
    ?	name:{
        ?		type:String,//类型
            ?	requried:true,//必要性
               	defaut: xxx//默认值
              }
    ?	}

备注:props是可读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告.如确实需要修改，可以在data中重新定义一个变量，将props的值赋给它

?

2.示例

我们定义一个组件，在data中定义name和age，在props中定义school属性

  <div>
      <p>学校:{{school}}</p>
      <p>姓名：{{name}}</p>
      <p>年龄：{{age}}</p>
  </div>

export default {
    name:'School',
    data(){
        return{
            name:'张振明',
            age:18
        }
    },
    props:['school']
}

在app.vue中注册school组件并使用该组件

<div id="app">
    <School school="北京大学"></School>
  </div>

import School from './components/school.vue'
export default ({
  name:'App',
  components:{School},
})

我们在使用该组件时，需要给school属性添加值，添加值后我们就可以在页面中输出该值啦

注意上述案例中 name和age是组件data中定义的属性,而school是在prop中定义的属性，如果我们在上级组件中给school赋值，school就为默认值(如果没有默认值，则值为空)

另外，如果我们需要在prop接收到数据之后又修改prop中的值，则需要在data中定义一个属性来接收prop中传来的值

在school组件中

<div>
      <p>学校:{{mySchool}}</p>
      <p>姓名：{{name}}</p>
      <p>年龄：{{age}}</p>
  </div>

 name:'School',
    data(){
        return{
            name:'张振明',
            age:18,
            mySchool:this.school+"666"
        }
    },
    props:['school']

这样就能将props中的school属性进行修改了