二維碼
        企資網(wǎng)

        掃一掃關(guān)注

        當(dāng)前位置: 首頁(yè) » 企資快訊 » 匯總 » 正文

        簡(jiǎn)單聊一下vue的屬姓概念

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

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

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

        定義屬性得兩種方式 1.props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 無(wú)法對(duì)屬性值進(jìn)行校驗(yàn) 2.可以對(duì)屬性值進(jìn)行校驗(yàn)

        props: { // 基礎(chǔ)得類型檢查 (`null` 和 `undefined` 會(huì)通過(guò)任何類型驗(yàn)證) propA: Number, // 多個(gè)可能得類型 propB: [String, Number], // 必填得字符串 propC: { type: String, required: true }, // 帶有默認(rèn)值得數(shù)字 propD: { type: Number, default: 100 }, // 帶有默認(rèn)值得對(duì)象 propE: { type: Object, // 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取 default: function () { return { message: 'hello' } } }, // 自定義驗(yàn)證函數(shù) propF: { validator: function (value) { // 這個(gè)值必須匹配下列字符串中得一個(gè) 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 ["入門(mén)","小站","Rumenz"].includes(val) } }, list:{ type:Array, default:()=>[] }, isView:{ type:Boolean, default:false }, onChange:{ type:Function, default:()=>{} } }, methods:{ handClick(){ this.onChange(this.type==="入門(mén)"?"one":"tow") } }}</script><style></style>

        父組件應(yīng)用子組件

        <template><div id="app"> {{msg}} <!--屬性綁定格式 :[自組件得屬性]:[父組件得屬性]--> <Props :name="name" :type="type" :list="list" :isView="view" :onChange="onChange" /> </div></template><script>//導(dǎo)入子組件import Props from './components/Props'export default { name: 'App', data() { return { msg: "hello 入門(mén)小站", name:"name", type:"入門(mén)", list:['入門(mén)','小站'], 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>

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

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

        粵ICP備16078936號(hào)

        微信

        關(guān)注
        微信

        微信二維碼

        WAP二維碼

        客服

        聯(lián)系
        客服

        聯(lián)系客服:

        在線QQ: 303377504

        客服電話: 020-82301567

        E_mail郵箱: weilaitui@qq.com

        微信公眾號(hào): weishitui

        客服001 客服002 客服003

        工作時(shí)間:

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

        反饋

        用戶
        反饋

        主站蜘蛛池模板: 日韩精品中文字幕无码一区 | 久久精品国产一区二区三区肥胖| 又紧又大又爽精品一区二区| 亚洲电影国产一区| 伊人久久一区二区三区无码| 一区二区三区人妻无码| 无码精品蜜桃一区二区三区WW | 国产福利电影一区二区三区,亚洲国模精品一区 | 国产AV一区二区三区传媒| 美女福利视频一区二区| 国产福利酱国产一区二区| 亚洲一区二区成人| 国产一区二区免费| 中文字幕一区二区人妻性色| 一区二区三区在线观看中文字幕| 亚洲国产日韩一区高清在线 | 精品亚洲一区二区| 激情内射日本一区二区三区| 一区二区精品在线观看| 日本一区二区高清不卡| 动漫精品第一区二区三区| 国偷自产视频一区二区久| 天堂成人一区二区三区| 日本一区免费电影| 精品一区二区91| 精品人妻少妇一区二区三区不卡 | 国偷自产视频一区二区久| 国产小仙女视频一区二区三区| 成人精品一区二区户外勾搭野战| 一区高清大胆人体| 国产精品制服丝袜一区| 精品国产福利一区二区| 亚洲AV无码一区二区三区久久精品 | 成人无号精品一区二区三区| 麻豆AV天堂一区二区香蕉 | 久热国产精品视频一区二区三区| 亚洲一区中文字幕在线电影网| 亚洲丰满熟女一区二区v| 国产精品综合AV一区二区国产馆| 无码夜色一区二区三区| 国产成人一区二区三区高清|