Vue：props（接收引數）
阿新 • • 發佈：2021-11-10
使用元件Student時候：<Student></Student>
思考：能否將我要的資料丟給元件而不是元件自己定義data
於是<Student name=“小紅” age=“15”></Student>
是被Vue接受的
props：是Vue元件獲取外部傳入值得屬性
作用：將外部獲取的值加到vm例項中使得現在的vm可以呼叫
三種接收引數方式
簡單處理法
<template> <div> <h2>學生名字：{{sdt}}</h2> <h2>年齡：{{age}}</h2> </div> </template> <script> export default { name: "Student", data(){ return { } } //props接收欄位student：發現原來已經有了所以接收的欄位不能設定在data下 //加引號 ,props:['sdt','age'] } </script> <style scoped> </style>
規範接收
<template> <div> <h2>學生名字：{{sdt}}</h2> <h2>年齡：{{age}}</h2> </div> </template> <script> export default { name: "Student", data(){ return { } } //規定接收的型別 ,props:{ sdt:String, age:Number } } </script> <style scoped> </style>
超級嚴格接收
<template> <div> <h2>學生名字：{{sdt}}</h2> <h2>年齡：{{age}}</h2> </div> </template> <script> export default { name: "Student", data(){ return { } } ,props:{ sdt:{ type:String, required:true //必須的 }, age:Number } } </script> <style scoped> </style>
關於傳入的注意點：
原來所有傳遞都會變成String包含age=“18”
<Student sdt="小白" age="18"></Student>
加上v-bind：告訴vc傳入的不是字串，而是一個數字
<Student sdt="小白" :age="18"></Student>