91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Vue中怎么使用v-model自定義組件

發布時間:2021-07-09 10:53:49 來源:億速云 閱讀:244 作者:Leah 欄目:大數據

Vue中怎么使用v-model自定義組件,相信很多沒有經驗的人對此束手無策,為此本文總結了問題出現的原因和解決方法,通過這篇文章希望你能解決這個問題。

我們在使用vue的時候如果想實現雙向數據綁定,就會使用v-model,代碼如下:

<input v-model="something">

那要是自定義了一個組件,想實現雙向數據綁定該如何呢?首先我們要清楚v-model的原理,上面的代碼其實是如下代碼的一種簡寫:

<input  :value="something"  @:input="something = $event.target.value">

下面我們來看一個需求,代碼如下:

  <div id="app">        <p>{{msg}}</p>        <my-input>  </div>

通過完成my-input組件的代碼,實現數據雙向綁定。

第一種實現方式,如果my-input換成input直接一個v-model就搞定了,但是現在我們不使用v-modle如何實現呢?看代碼:

<body><div id="app"><p>{{msg}}</p><!-- 使用自定義子組件,通過value綁定msg ,--><my-inputt :value="msg" @input="changemsg"></div>
<script>// 1、自定義組件,// a、用props接收value傳遞過來的參數,// b、用內部數據接收value// c、新建oninput方法,更改currentvalue,//   讓子組件函數觸發父組件函數,并傳值// d、建立模板,在文本框中綁定通過value綁定currentvalue,//    通過input綁定oninput事件Vue.component("my-inputt", {    template: `<div>    my-input:    <input    type="text"    :value=currentvalue    @input="oninput"/>    </div>`,    props: ["value"],    data() {        return {            currentvalue: this.value        }    },    methods: {        oninput(e) {            this.currentvalue = e.target.value;            this.$emit('input', e.target.value)        }    }})
new Vue({    el:"#app",    data: {        msg: "初始值"    },    methods: {        changemsg(v) {            this.msg = v        }    }})</script></body>

關鍵點在于自組件如何向父組件傳值,數據的流向是,父組件將msg傳遞個自組件,自組件拷貝了一個副本,修改副本后通過觸發父組件綁定的函數,從而達到數據雙向綁定的原理。

下面我們在組件中使用v-model來實現上面的功能:

<body>  <div id="app">    <p>{{msg}}</p>    <my-input v-model="msg">     </div>
<script>Vue.component("my-input",{  template:`<div>    <input type="text"    :value="currentValue"    @input="Oninput">    </div>`,  props:["value"],  data(){    return {      currentValue:this.value    }  },  methods: {    Oninput($event){      this.currentValue = $event.target.value;      this.$emit('input',$event.target.value)    }  },  created () {    console.log(this.value)  }})
new Vue({  el:"#app",  data:{    msg:"初始值"  }})</script></body>

對比一下我們發現使用v-model相對來說比較簡潔,而且不需要對父組件增加額外的方法,第一種方案父組件額外定義了一個changemsg的函數,而第二種方案卻沒有,第二種方案只需要監聽自組件內部事件,在相應的地方觸發input事件即可,更改數據的事情vue會自動更新。

對于一個帶有 v-model 的組件原理大概有以下幾點:

1、首先帶有v-model的父組件通過綁定的value值(即v-model的綁定值)傳給子組件

2、然后子組件通過 prop接收一個 value; 

3、最后子組件利用 $emit 觸發 input 事件,并傳入新值value給父組件;

4、vue會自動實現數據更新。

看完上述內容,你們掌握Vue中怎么使用v-model自定義組件的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

图木舒克市| 威信县| 吴江市| 隆德县| 策勒县| 淮阳县| 奈曼旗| 商城县| 镇沅| 福清市| 晋宁县| 富锦市| 织金县| 扎赉特旗| 孝感市| 奇台县| 汾西县| 安仁县| 武功县| 固安县| 左权县| 浙江省| 泗洪县| 南汇区| 乌兰察布市| 宁都县| 靖宇县| 九台市| 广河县| 渝北区| 苏尼特左旗| 且末县| 通海县| 德惠市| 壤塘县| 阿拉善左旗| 称多县| 新泰市| 华蓥市| 图木舒克市| 惠东县|