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

更新時(shí)間：2019年10月11日 15:08:46 作者：RocChan

這篇文章主要介紹了詳解vue 自定義組件使用v-model 及探究其中原理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1、首先我們來(lái)實(shí)現(xiàn)自定義組件中使用v-model

父組件中注冊(cè)子組件

<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功能是實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，即綁定name值及改變值。

工作等同于以下代碼:

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

v-bind將name的值綁定到value

v-on綁定input事件，當(dāng)事件觸發(fā)時(shí)將事件目標(biāo)值賦值給name

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
v-model

相關(guān)文章

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