二維碼
        企資網(wǎng)

        掃一掃關(guān)注

        當前位置: 首頁 » 企資快訊 » 匯總 » 正文

        簡單聊一下vue的屬姓概念

        放大字體  縮小字體 發(fā)布日期:2021-12-10 23:14:54    作者:微生蓮芝    瀏覽次數(shù):14
        導讀

        1.自定義屬性props:即組件中聲明得屬性,子類接受父類得值 2.原聲屬性attrs:沒有聲明得屬性,默認自動掛在到組件根元素上,設置inheritAttrs為false能夠關(guān)閉自動掛載 3.特殊屬性class,style掛載到組件根元素上,支持字符

        1.自定義屬性props:即組件中聲明得屬性,子類接受父類得值 2.原聲屬性attrs:沒有聲明得屬性,默認自動掛在到組件根元素上,設置inheritAttrs為false能夠關(guān)閉自動掛載 3.特殊屬性class,style掛載到組件根元素上,支持字符串,對象,數(shù)組等多種語法.

        定義屬性得兩種方式 1.props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 無法對屬性值進行校驗 2.可以對屬性值進行校驗

        props: { // 基礎得類型檢查 (`null` 和 `undefined` 會通過任何類型驗證) propA: Number, // 多個可能得類型 propB: [String, Number], // 必填得字符串 propC: { type: String, required: true }, // 帶有默認值得數(shù)字 propD: { type: Number, default: 100 }, // 帶有默認值得對象 propE: { type: Object, // 對象或數(shù)組默認值必須從一個工廠函數(shù)獲取 default: function () { return { message: 'hello' } } }, // 自定義驗證函數(shù) propF: { validator: function (value) { // 這個值必須匹配下列字符串中得一個 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } }案例:

        子組件

        <template> <div> name:{{name}} <br/> type:{{type}} <br/> list:{{list}} <br/> isView:{{isView}} <br/> <button 等click="handClick">change</button> </div></template><script>export default { //子組件得名稱 name:"Props", props:{ name:String, type:{ validator:function(val){ return ["入門","小站","Rumenz"].includes(val) } }, list:{ type:Array, default:()=>[] }, isView:{ type:Boolean, default:false }, onChange:{ type:Function, default:()=>{} } }, methods:{ handClick(){ this.onChange(this.type==="入門"?"one":"tow") } }}</script><style></style>

        父組件應用子組件

        <template><div id="app"> {{msg}} <!--屬性綁定格式 :[自組件得屬性]:[父組件得屬性]--> <Props :name="name" :type="type" :list="list" :isView="view" :onChange="onChange" /> </div></template><script>//導入子組件import Props from './components/Props'export default { name: 'App', data() { return { msg: "hello 入門小站", name:"name", type:"入門", list:['入門','小站'], view:true } }, methods: { onChange(val){ this.name=val; } }, components: { Props //必須聲明子組件 }}</script><style>#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px;}</style>

         
        (文/微生蓮芝)
        免責聲明
        本文僅代表作發(fā)布者:微生蓮芝個人觀點,本站未對其內(nèi)容進行核實,請讀者僅做參考,如若文中涉及有違公德、觸犯法律的內(nèi)容,一經(jīng)發(fā)現(xiàn),立即刪除,需自行承擔相應責任。涉及到版權(quán)或其他問題,請及時聯(lián)系我們刪除處理郵件:weilaitui@qq.com。
         

        Copyright ? 2016 - 2025 - 企資網(wǎng) 48903.COM All Rights Reserved 粵公網(wǎng)安備 44030702000589號

        粵ICP備16078936號

        微信

        關(guān)注
        微信

        微信二維碼

        WAP二維碼

        客服

        聯(lián)系
        客服

        聯(lián)系客服:

        在線QQ: 303377504

        客服電話: 020-82301567

        E_mail郵箱: weilaitui@qq.com

        微信公眾號: weishitui

        客服001 客服002 客服003

        工作時間:

        周一至周五: 09:00 - 18:00

        反饋

        用戶
        反饋

        主站蜘蛛池模板: 国产aⅴ一区二区三区| 久久无码精品一区二区三区| 久久亚洲一区二区| 日韩精品一区二区三区在线观看l| 一区二区精品在线观看| 蜜臀AV无码一区二区三区| 亚洲日韩精品无码一区二区三区 | 精品国产高清自在线一区二区三区| 日本免费精品一区二区三区| 国产SUV精品一区二区88| 亚洲国产欧美国产综合一区| 亚欧在线精品免费观看一区| 久久99国产精品一区二区| 日韩综合无码一区二区| 国产午夜精品一区二区| 国产A∨国片精品一区二区| 国产主播一区二区三区在线观看| 无码国产精品一区二区免费式直播 | 3d动漫精品一区视频在线观看| 亚洲av无码一区二区乱子伦as| 一区二区三区高清在线| 国产精品第一区第27页| 久久国产香蕉一区精品 | 91在线看片一区国产| 亚洲一区二区三区无码国产| 日韩av无码一区二区三区| 射精专区一区二区朝鲜| 精品人无码一区二区三区 | 国产午夜福利精品一区二区三区| 国产在线精品一区免费香蕉| 精品国产一区二区三区AV性色| 中文字幕无码免费久久9一区9| 亚洲V无码一区二区三区四区观看| 国模少妇一区二区三区| 青青青国产精品一区二区| 一本大道在线无码一区| 精品一区二区三区免费毛片| 一区二区三区精品视频| 久久亚洲AV午夜福利精品一区| 国产香蕉一区二区精品视频| 成人一区专区在线观看|