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 中定义了必填 不传参就会报错并且页面无内容。
备注：默认值和必填选项不能一起使用 完整写法一般很少使用 用的最多的还是第一种哟。
原创作者：吴小糖
创作时间：2023.3.28
