props配置项
props 让组件接收外部传过来的数据
1)传递数据
这里需要注意,通过 age = "18"的方式,传递进去的数据是字符类型的,通过动态绑定 :age = "26" 的方式,传递进去的数据是整型类型
<!--这里需要注意,:age="26" 代表 v-bind动态绑定,传入的age是int类型--> <Student name="马铃薯1" :sex="'男'" :age="26"></Student> <!--这里的 age="18",传入的age是字符串类型--> <Student name="马铃薯2" sex="男" age="18"></Student>
2)接收数据
第一种方式(只接收)
// props 配置项(开发过程中,用的比较多) // 简单声明接收 props:["name","sex","age"],
第二种方式(限制类型)
// 接收的同时,对数据进行类型限制 props:{ name:String, sex:String, age:Number, },
第三种方式(限制类型、限制必要性、指定默认值)
// 接收的同时,对数据进行类型限制 + 默认值的指定 + 必要性的限制 props:{ name:{ type:String, // name的类型是字符串 required:true // name是必要的 }, sex:{ type:String, // sex的类型是字符串 default:"男" // 默认值 }, age:{ type:Number, // age的类型是整型 // default:18 // 默认值 required:true // name是必要的 } }
注意:一般使用props配置项定义的属性,是不建议进行修改的,props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若义务需求确实需要修改,那么请复制 props 的内容到 data 中,然后去修改 data 中的数据
src/components/Student.vue(这里是重点,props配置项)
<template> <div> <h1>{{msg}}</h1> <h2>学生姓名:{{name}}</h2> <h2>学生性别:{{sex}}</h2> <h2>学生年龄:{{myAge+1}}</h2> <button @click="updateAge">点击修改年龄信息</button> </div> </template> <script> export default{ // eslint-disable-next-line vue/multi-word-component-names name:"Student", data(){ return{ msg:"这是一名来自遥远星球的学生信息", // 如果要实现 Student组件 实现多个学生信息,这里不建议写死,可以通过 props 配置项来实现 // name:"马铃薯", // sex:"男", // age:26 // 一般来说,在 props 配置项 定义的属性,是不建议进行修改的,如果要进行修改,可以通过在 data 中定义另一个变量 myAge:this.age } }, methods:{ updateAge(){ this.myAge++ } }, // props 配置项(开发过程中,用的比较多) // 简单声明接收 // props:["name","sex","age"], // 接收的同时,对数据进行类型限制 // props:{ // name:String, // sex:String, // age:Number, // }, // 接收的同时,对数据进行类型限制 + 默认值的指定 + 必要性的限制 props:{ name:{ type:String, // name的类型是字符串 required:true // name是必要的 }, sex:{ type:String, // sex的类型是字符串 default:"男" // 默认值 }, age:{ type:Number, // age的类型是整型 // default:18 // 默认值 required:true // name是必要的 } } } </script>
src/App.vue
<template> <div> <!--学生1的信息--> <!--这里需要注意,:age="26" 代表 v-bind动态绑定,传入的age是int类型--> <Student name="马铃薯1" :sex="'男'" :age="26"></Student> <hr/> <!--学生2的信息--> <!--这里的 age="18",传入的age是字符串类型--> <Student name="马铃薯2" sex="男" age="18"></Student> </div> </template> <script> // 引入School组件 import Student from "@/components/Student.vue"; export default{ name:"App", components:{ Student:Student, } } </script>
src/main.js
import Vue from "vue" import App from "./App.vue" // 阻止 vue 在启动时生成生产提示 Vue.config.productionTip = false new Vue({ el:"#app", render:h => h(App) })
标签:Vue,name,age,28,sex,props,默认值,String From: https://www.cnblogs.com/REN-Murphy/p/17786363.html