vue2父组件给子组件传值
一、沿用上次的案例
二、传值思路
要实现的是父组件向子组件传值,子组件本身并不存储数据
所以这里要把原有子组件的data数据注释,改为由父组件传递进来并展示
props是用于父组件向子组件传递数据信息
三、更改子组件User为接收父组件内容(与第四步一起使用,缺一不可
- 在子组件中,
使用props配置项
,定义子组件能够被接受的值 - 可以看到这里把name、sex、hobby、age四个属性值都定义了,也就是子组件允许父组件传递这四个属性的值
- 其余属性传递给子组件一律不处理
- 这里改写完毕后,需要父组件将数据传递过来才能使用,否则页面将报错
点击查看代码
<template>
<div>
<ul>
<li>姓名:{{ name }}</li>
<li>性别:{{ sex }}</li>
<li>爱好:{{ hobby }}</li>
<li>年龄: {{ age }}</li>
</ul>
</div>
</template>
<script>
export default {
// 1. 注释子组件User原有的定义data方式
/* data() {
return {
name: "Anbin",
sex: "男",
hobby: "sleep",
age: 18,
}
}, */
//2. 改为定义接收父组件的值
props: ["name", "sex", "hobby", "age"],
};
</script>
<style>
</style>
四、更改父组件App向子组件User传值(与第三步一起使用,缺一不可
可以看到由3改为了3.1
增加了父组件向子组件传递四个属性值的操作,以实现父组件向子组件的最终调用
点击查看代码
<template>
<div>
<h1>{{ title }}</h1>
<!-- 3. 在页面上使用子组件User -->
<!-- <User></User> -->
<!-- 3.1 在页面使用子组件的基础上,实现父组件向子组件传值,以让子组件数据正常使用 -->
<User name='小明' age="18" hobby="睡觉" sex="男"></User>
</div>
</template>
<script>
// 1. 引入子组件User.vue,并起名为User
import User from "./components/User.vue";
export default {
name: "App",
data() {
return {
title: "我是App组件",
};
},
components: {
// 2. 在父组件App中注册子组件User
User,
},
};
</script>
<style>
</style>
五、查看页面效果
可以看到,这样就实现了父组件向子组件传值
六、父组件向子组件传值的三种方式:
-
最简单形式,是刚刚实现的,props配置项是数组;数组中写能被父组件接受的属性名,对应下图2
-
进阶形式,增加数据类型限制,props配置项是对象;数据类型的首字母必须大写,例如字符串类型不能是string,必须是String,其他数据类型同理,对应下图2.1
-
最终形式,增加默认值、增加是否为必填项,对应下图2.2
-
props能传递多种数据类型,不仅局限于
字符串、数值
可传递的数据类型汇总:Prop类型
默认值配置项(可选配置:defalut
是否必填配置项(可选配置:required
-
此处2.3对age属性,以数组形式定义了多种类型的限制,允许接收父组件传递字符串类型和数值类型的age值
-
以此处2.3的age属性为例,假如子组件age定义只允许接收Number类型的数值,而父组件App.vue中写法不规范
虽然数据可以展示在页面上,但这并不符合官方规范,控制台会报错传递的prop类型不规范:Invalid prop: type check failed for prop "age". Expected Number with value 18, got String with value "18"
-
以第6点来说,实现以下写法举例:
<User name='小明' age=18 hobby="睡觉" sex="男"></User>
错误
因为age要求传递数值,但传递了字符串类型的18;即使18没有被引号包裹,vue也默认当成字符串类型的18进行传递<User name='小明' v-bind:age="18" hobby="睡觉" sex="男"></User>
正确
使用了v-bind表达式来实现一个结果值,虽然有双引号,但v-bind表达式返回一个结果值,所以会被当成Number类型进行传递<User name='小明' :age="18" hobby="睡觉" sex="男"></User>
正确
最终形式,只是对v-bind进行了简写,由v-bind更改为 :
点击查看代码
<template>
<div>
<ul>
<li>姓名:{{ name }}</li>
<li>性别:{{ sex }}</li>
<li>爱好:{{ hobby }}</li>
<li>年龄: {{ age }}</li>
</ul>
</div>
</template>
<script>
export default {
// 1. 注释子组件User原有的定义data方式
/* data() {
return {
name: "Anbin",
sex: "男",
hobby: "sleep",
age: 18,
}
}, */
//2. 改为定义接收父组件的值
//props: ["name", "sex", "hobby", "age"],
//2.1 在定义接收父组件的值基础上,增加属性要求的数据类型
/* props: {
name: String, //要求传递的name属性值必须是 字符串类型
sex: String, //要求传递的sex属性值必须是 字符串类型
hobby: String, //要求传递的hobby属性值必须是 字符串类型
age: Number, //要求传递的age属性值必须是 数字类型
}, */
//2.2 在定义接收父组件的值基础上,增加属性要求的数据类型、默认值、是否必填
props: {
name: {
type: String, //要求name属性值必须是字符串类型
defalut: "Anbin", //默认name属性值是Anbin
required: true, //要求父组件使用本组件,必须传递name属性值
},
sex: {
type: String, //要求sex属性值必须是字符串类型
required: true, //要求父组件使用本组件,必须传递sex属性值
//sex属性没有默认值
},
hobby: {
type: String, //要求hobby属性值必须是字符串类型
defalut: "吃饭", //默认hobby属性值是吃饭
// hobby不是必须传递的
},
age: {
// type: Number, //要求age属性值必须是数值类型
type: [Number, String], //age属性值可以是数值和字符串类型
defalut: 19, //默认defalut属性值是吃饭
required: true, //要求父组件使用本组件,必须传递age属性值
},
},
};
</script>
<style>
</style>