Vue-props配置功能

Vue-props配置功能

props概述

• 功能：接收从其他组件传过来的数据，将数据从静态转为动态
• 注意：
  • 同一层组件不能使用props，必须是父组件传子组件的形式。父组件传数据，子组件接收数据。
  • 不能什么数据都接收，可能会出现一些奇怪的bug
  • props接收过来的数据不要修改，页面渲染可能没有问题，但控制台会报错，而且不符合规范
    

props的三种接收方法：

• 第一种：数组形式（常用）

props:['a', 'b']

• 第二种：类型限制

props : { a : String b : Number 
}

• 第三种：类型限制，必要性限制，默认值

props : { a : {// type:类型（可以是数字，字符串等）type : Number, // required：true 或者 false// 设置为true视为a必须存在（必填项），没有a则控制台报错// 默认情况为false required : true }, b : { type : Number, // default：默认值// 在添加默认值之前该字段接收的数据已经有数值时，则默认值无效default : 10 }
}

传数据的形式（传数据的形式可对应任意一种接受数据的方法）：

• 在标签内传数据

// 父组件
<Info name="张三" :age="12"></Info>// 子组件
props : ['name', 'age']

• 在data(){}中传数据

// 父组件
<Info :list="list"></Info>
data() {return {list : [{id:'001', name:'zhangsan', age:'10'},{id:'002', name:'lisi', age:'20'}]}
}// 子组件
props : ['list']

• 在methods : {}中传数据

// 父组件
<Info :list="list"></Info>
method : {list(){......}
}// 子组件
props : ['list']

• 注：传数据的形式有很多，不局限以上用法，也可以在computed : {}中传数据等

怎么用？

• 父组件传数据，子组件接收数据
• 父组件App.vue

<template><div><h1>{{msg}}</h1>// 当出现第二 或 第三种带有限定类型的props时，要注意接受的数据是否符合类型限制// 不符合类型限制，但又不想修改类型，例如：age="12"，可采用v-bind:// v-bind:简写形式 => ':'，等号后面可以是常量或字符串等<Info name="张三" :age="12"></Info></div>
</template><script>import Info from './components/Info.vue'export default {name : 'App',data() {return {msg : '个人信息'}},components : {Info}}
</script>

• 子组件Info.vue

<template><div><h3>姓名：{{name}}</h3><h3>年龄：{{age}}</h3></div>
</template><script>
export default {name : 'Info',data() {return {name: this.name}},// 数组形式（常用）props : ['name','age']// 带有类型限定props : { name : String age : Number }// 类型限制，必要性限制，默认值props : { name : {type : Number, required : true },age : { type : Number, default : 10 }}
}
</script>type : Number, required : true },age : { type : Number, default : 10 }}
}
</script>