詳解vue 自定義組件使用v-model 及探究其中原理

 更新時間:2019年10月11日 15:08:47   作者:RocChan   我要評論
這篇文章主要介紹了詳解vue 自定義組件使用v-model 及探究其中原理,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

1、首先我們來實現自定義組件中使用v-model

父組件中注冊子組件

<template>
 <div id="app">
  <p>{{name}}</p>
  <MyInput v-model="name"/>
 </div>
</template>

<script>
import MyInput from './components/MyInput.vue'
export default {
 name: 'app',
 data(){
  return {
   name: 132
  }
 },
 components: {
  MyInput
 },
}
</script>

子組件接收父組件傳值

<template>
  <div>
    <input type="text" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" />
  </div>
</template>
<script>
export default {
 name: "MyInput",
 props: {
  value: ""
 },
};
</script>

2.探究v-model

在input中的v-model功能是實現數據的雙向綁定,即綁定name值及改變值。

工作等同于以下代碼:

<input type="text" v-bind:value="name" v-on:input="event=>name=event.target.value" />

v-bind將name的值綁定到value

v-on綁定input事件,當事件觸發時將事件目標值賦值給name

而在自定義標簽中的v-model與在input中的功能一致,但綁定的事件有些許不同,如下:

<MyInput type="text" v-bind:value="value" v-on:input="value=>name=value" />

在子組件中使用$emit觸發MyInput中的input事件,此時$emit并不能傳input的event的事件,而是直接傳目標值。

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • vue 根據數組中某一項的值進行排序的方法

    vue 根據數組中某一項的值進行排序的方法

    這篇文章主要介紹了vue 根據數組中某一項的值進行排序的方法,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • Vue 組件注冊實例詳解

    Vue 組件注冊實例詳解

    這篇文章主要介紹了Vue 組件注冊,結合實例形式較為詳細的分析了vue.js組件的常見分類、注冊方法及相關操作注意事項,需要的朋友可以參考下
    2019-02-02
  • Vue.js每天必學之表單控件綁定

    Vue.js每天必學之表單控件綁定

    Vue.js每天必學之表單控件綁定,如何在表單控件元素上創建雙向數據綁定,感興趣的小伙伴們可以參考一下
    2016-09-09
  • Vue+Django項目部署詳解

    Vue+Django項目部署詳解

    這篇文章主要介紹了Vue+Django項目部署詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-05-05
  • 如何根據業務封裝自己的功能組件

    如何根據業務封裝自己的功能組件

    這篇文章主要介紹了Vue封裝功能組件,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • 解決Vue編譯時寫在style中的路徑問題

    解決Vue編譯時寫在style中的路徑問題

    下面小編就為大家帶來一篇解決Vue編譯時寫在style中的路徑問題。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • 詳解vue-cli + webpack 多頁面實例應用

    詳解vue-cli + webpack 多頁面實例應用

    本篇文章主要介紹了詳解vue-cli + webpack 多頁面實例應用,具有一定的參考價值,有興趣的可以了解一下
    2017-04-04
  • 小白教程|一小時上手最流行的前端框架vue(推薦)

    小白教程|一小時上手最流行的前端框架vue(推薦)

    這篇文章主要介紹了前端框架vue,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04
  • vue項目動態設置頁面title及是否緩存頁面的問題

    vue項目動態設置頁面title及是否緩存頁面的問題

    這篇文章主要介紹了vue項目動態設置頁面title及是否緩存頁面的問題,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-11-11
  • VUE簡單的定時器實時刷新的實現方法

    VUE簡單的定時器實時刷新的實現方法

    這篇文章主要介紹了VUE簡單的定時器實時刷新的實現方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-01-01

最新評論

pc蛋蛋计划下载