Vue 父组件向子组件传参 props 属性

最新推荐文章于 2024-03-19 18:06:34 发布

小吴吴吴呀

最新推荐文章于 2024-03-19 18:06:34 发布

阅读量1k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xiaowude_boke/article/details/129824095

版权

props 用于接收父组件传过来的数据，父传子。

props 是只读的，如果修改 props 中的数据，Vue 会发出警告。如果需要修改，可以将 props 中的数据复制到 data 中，然后修改 data 中的数据。

引出 props 的作用：

首先需要在 components 文件夹内创建一个子组件。例：Shop.vue 组件。

<template>
    <div>
        <h2>商品名称：{{ name }}</h2>
        <strong>商品价格：￥{{ price }}</strong>
        <p>商品数量：{{ num }}</p>
        <hr />
    </div>
</template>

<script>
export default {
    name: "Shop",
    data() {
        return {
            name: "草莓",
            price: 999,
            num: 100
        }
    }
}
</script>

然后在 Home.vue 页面引入 Shop.vue 组件并多次使用创建商品。

<template>
    <div>
        <h2>商品列表</h2>
        <hr />
        <Shop></Shop>
        <Shop></Shop>
        <Shop></Shop>
    </div>
</template>

<script>
import Shop from "../components/Shop";
export default {
    name: 'Home',
    components: { Shop }
}
</script>

注：所有商品的内容都是一样的很明显不符合实际场景如果想要动态指定每个组件的内容需要使用 props 配置项了。

props 数组写法【无限制】：

在 Shop.vue 组件内定义 props 并以数组的形式接收参数然后在页面使用即可。

<template>
    <div>
        <h2>商品名称：{{ name }}</h2>
        <strong>商品价格：￥{{ price }}</strong>
        <p>商品数量：{{ num }}</p>
        <hr />
    </div>
</template>

<script>
export default {
    name: "Shop",
    props: ['name', 'price', 'num'],
}
</script>

在 Home.vue 页面使用组件时直接在标签中传递参数即可。

<template>
    <div>
        <h2>商品列表</h2>
        <hr />
        <Shop name="草莓" price="99" num="50"></Shop>
        <Shop name="苹果" price="30" num="30"></Shop>
        <Shop name="葡萄" price="56" num="20"></Shop>
    </div>
</template>

<script>
import Shop from "../components/Shop";
export default {
    name: 'Home',
    components: { Shop }
}
</script>

注：在组件标签中不允许使用 key、ref 等 Vue 已经使用的关键字作为参数名。

也可以配合 v-for 指令动态传递参数效果一致。

<template>
    <div>
        <h2>商品列表</h2>
        <hr />
        <Shop v-for="item in lists" :key="item.id" :name="item.name" :price="item.price" :num="item.num"></Shop>
    </div>
</template>

<script>
import Shop from "../components/Shop";
export default {
    name: 'Home',
    components: { Shop },
    data() {
        return {
            lists: [
                {
                    id: 1,
                    name: "草莓",
                    price: 99,
                    num: 50
                }, {
                    id: 2,
                    name: "苹果",
                    price: 30,
                    num: 30
                }, {
                    id: 3,
                    name: "葡萄",
                    price: 56,
                    num: 20
                }
            ]
        }
    }
}
</script>

注：如果不需要对数据进行任何限制推荐使用数组写法。

对象写法【限制数据类型】：

将 Shop.vue 组件中的 props 配置项换成对象的写法并设置数据类型。

<template>
    <div>
        <h2>商品名称：{{ name }}</h2>
        <strong>商品价格：￥{{ price }}</strong>
        <p>商品数量：{{ num }}</p>
        <hr />
    </div>
</template>

<script>
export default {
    name: "Shop",
    props: {
        name: String,
        price: Number,
        num: Number
    }
}
</script>

然后在 Home.vue 页面正常引入在组件标签上定义内容即可。

<template>
    <div>
        <h2>商品列表</h2>
        <hr />
        <Shop name="草莓" price="99" num="50"></Shop>
        <Shop name="苹果" price="30" num="30"></Shop>
        <Shop name="葡萄" price="56" num="20"></Shop>
    </div>
</template>

<script>
import Shop from "../components/Shop";
export default {
    name: 'Home',
    components: { Shop }
}
</script>

注：数据虽然可以正常显示但是控制台出现了报错这是因为 props 定义的 price 和 num 的类型为数字，而接收到的却是字符串。

在组件标签上直接写的数据都是字符串类型可以用 v-bind 动态指定数据解决这个问题。

<template>
    <div>
        <h2>商品列表</h2>
        <hr />
        <Shop name="草莓" :price="99" :num="50"></Shop>
        <Shop name="苹果" :price="30" :num="30"></Shop>
        <Shop name="葡萄" :price="56" :num="20"></Shop>
    </div>
</template>

<script>
import Shop from "../components/Shop";
export default {
    name: 'Home',
    components: { Shop }
}
</script>

注：这是因为 Vue 会将 v-bind 绑定的内容当做 JS 表达式去解析而不是普通的字符串。

完整写法【限制数据类型、默认值、是否必填】：

将 Shop.vue 组件中的 props 配置项换成完整写法，并限制数据类型、将 name、price 设置为必填、给 num 设置默认值。

<template>
    <div>
        <h2>商品名称：{{ name }}</h2>
        <strong>商品价格：￥{{ price }}</strong>
        <p>商品数量：{{ num }}</p>
        <hr />
    </div>
</template>

<script>
export default {
    name: "Shop",
    props: {
        name: {
            type: String,
            required: true
        },
        price: {
            type: Number,
            required: true
        },
        num: {
            type: Number,
            default: 0
        }
    }
}
</script>

然后在 Home.vue 页面正常引入不过在传参时我们少传几个参数演示一下。

<template>
    <div>
        <h2>商品列表</h2>
        <hr />
        <Shop name="草莓" :price="99" :num="50"></Shop>
        <Shop name="苹果" :price="30"></Shop>
        <Shop name="葡萄"></Shop>
    </div>
</template>

<script>
import Shop from "../components/Shop";
export default {
    name: 'Home',
    components: { Shop }
}
</script>

注：如果在 props 中定义了默认值不传参会显示这个默认值如果在 props 中定义了必填不传参就会报错并且页面无内容。