Vue2&3-props配置功能

Vue2-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>

Vue3-props配置

props的配置在Vue2和Vue3上基本相同，这里主要说明如何用setup调用props的接受数据

• setup如何调用props？
  • 在setup函数中是没有this关键字的，所以在代用setup函数之前，会先给setup传递一个参数（props）
  • props参数在setup中被包装成一个代理对象，同样具有响应式处理能力

// App.vue
<template><User name="jack" :age="age"></User>
</template><script>import { ref } from 'vue'import Info from './components/Info.vue'export default {name : 'App',components : {Info},setup(){let age = ref(20)return{age}}}
</script>

// Info.vue
<template><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2>
</template><script>export default {name : 'Info',// Vue3的props依旧是Vue2的接收方式，没变props : [name, age],// setup参数名可以随意，没要求setup(props){console.log(props.name);console.log(props.age);}}
</script>