传递数据(props)
student.vue
<template> <div> <h3>{{msg}}</h3> <h3>姓名:{{name}}</h3> <h3>年龄:{{myage}}</h3> <h3>性别:{{sex}}</h3> <button @click="add">点击我,年龄++</button> </div> </template> <!-- 配置项:props 1.传递数据:<Student name='wei' :age="18" sex='男'></Student> <!-- :age : 数据绑定,对字符串里面内容进行操作 --> 2.接收数据,三种方式: i:(简单接收) props:['name'], i:(限制类型) props:{name:String} i:(类型限制+默认值限制,必要性限制) props:{ name:{ type:String,//类型限制 required:true,//必要性限制 default:99,//默认值限制 } } 备注:props是只读的,不能修改(传进来)数据,如果想要修改,那么需要复制一份要修改的数据放入data中,操作data中数据进行修改 --> <script> export default { name:'Student', data(){ return { msg:'我的项目', myage:this.age//不能直接对数据,进行修改,所以需要再整出来个变量 } }, methods:{ add(){ this.myage++//这边直接对变量++ } }, //简单接收 props:['name','age','sex'], //接收时,判断类型是否准确,不准确,控制台给出提示 // props:{ // name:String, // age:Number, // sex:String // }, //接收时,对数据进行:类型限制+默认值限制,必要性限制 // props:{ // name:{ // type:String, // required:true,//必要性限制 // }, // age:{ // type:Number, // default:99,//默认值限制 // }, // sex:{ // type:String, // required:false,//必要性限制 // } // }, } </script> <style> </style>
App.vue
<template> <div> <Student name='wei' :age="18" sex='男'></Student> <!-- :age : 数据绑定,对字符串里面内容进行操作 --> </div> </template> <!-- --> <script> import Student from './components/Student' export default{ name:'App', components:{Student} } </script> <style> </style>