亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

vue組件綁定v-model指令

標簽:
Vue.js

在平常的开发中一般v-model是绑定在input框或者textarea上的。但是在element ui框架中像el-input这样的组件可以直接v-model绑定数据。

<ListItem v-model="value">
        <div slot="slot1">你好1</div>
        <div slot="slot2">你好2</div>
        <div slot="slot3">你好3</div>
      </ListItem>


<template>
  <div class='list'>
    <!-- $emit必须是input还有change -->
    <input type="text" :value="value" @input="$emit('input',$event.target.value)">
  </div>
</template>

<script>

export default {
  props: ['value']
}
</script>

在子组件的input框中$emit发送的方法名要和原生input框的类似input或者change方法名一样,这样就可以实现自定义组件绑定v-model了。
其实子组件发送出来的这个方法名是vue组件上默认的方法名,如果有额外的操作我们采取@这个方法名,默认是不执行任何操作。


點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
6
獲贊與收藏
35

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消