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

更新時間：2019年10月11日 15:08:46 作者：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事件，當事件觸發(fā)時將事件目標值賦值給name

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

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

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

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

您可能感興趣的文章:

vue
v-model

vue全局組件與局部組件使用方法詳解
這篇文章主要為大家詳細介紹了vue全局組件與局部組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-03-03
vue.js中window.onresize的超詳細使用方法
這篇文章主要給大家介紹了關于vue.js中window.onresize的超詳細使用方法,window.onresize 是直接給window的onresize屬性綁定事件,只能有一個,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-12-12
Element el-menu中NavMenu的用法
今天封裝一個導航欄的組件,使用的Element的NavMenu組件。遇到一個問題，本文主要介紹了Element el-menu中NavMenu的用法，感興趣的可以了解一下
2023-04-04
vue-cli 使用axios的操作方法及整合axios的多種方法
這篇文章主要介紹了vue-cli 使用axios的操作方法及整合axios的多種方法,vue-cli整合axios的多種方法，小編一一給大家列出來了，大家根據自身需要選擇，需要的朋友可以參考下
2018-09-09
Vue3 v-bind 指令的基本用法
在 Vue 3 中,v-bind?指令用于將表達式的值綁定到 DOM 元素的屬性上,這個指令的語法與 Vue 2 相同,但有一些細微的變化和改進,這篇文章主要介紹了Vue3 v-bind 指令的基本用法,需要的朋友可以參考下
2024-08-08
Vue替代vuex的存儲庫Pinia詳細介紹
這篇文章主要介紹了Vue替代vuex的存儲庫Pinia，聽說pinia與vue3更配,便開啟了vue3的學習之路，pinia 和 vuex 具有相同的功效，是 Vue 的存儲庫，它允許您跨組件/頁面共享狀態(tài)
2022-09-09
printJS打印問題匯總以及解決辦法
Print.js一個小的javascript庫,可幫助您從網絡上打印,這篇文章主要給大家介紹了關于printJS打印問題匯總以及解決辦法的相關資料,文中介紹的非常詳細,需要的朋友可以參考下
2024-05-05
詳解Vite的新體驗
這篇文章主要介紹了詳解Vite的新體驗，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-02-02
vue element-ui讀取pdf文件的方法
這篇文章主要介紹了vue element-ui讀取pdf文件的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-11-11
webpack vue 項目打包生成的文件,資源文件報404問題的修復方法(總結篇)
這篇文章主要介紹了解決webpack vue 項目打包生成的文件,資源文件報404問題的修復方法,需要的朋友可以參考下
2018-01-01