技術標籤：Vuevue

vue 高階特性 自定義v-model

1）自定義v-model（v-bind+觸發的input事件）實現雙向繫結

<template>
  <div class="header">
    <!-- rights元件 -->
    <p>{
  {name}}</p>
    <!-- 自定義v-model -->
    <Inp v-model="name"></Inp> 
    <!--平時我們使用的 <input type="text" v-model="name"> -->
  </div>
</template>

<script type="text/ecmascript-6">
import Inp from './inp'
export default {
  data() {
    return {
      name: 'liu man'
    }
  },
  components:{
    Inp,
  },
  
}
</script>
 

<template>
  <div>
    <!-- inp元件 -->
    <input type="text" :value='text1' 
      @input="$emit('change',$event.target.value)"
    >
  </div>

  <!--  需要注意的是
    1. 上面的input