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

發(fā)布時(shí)間：2020-10-20 11:46:08 來(lái)源：腳本之家閱讀：230 作者：RocChan 欄目：web開(kāi)發(fā)

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)值。

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

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

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽