v-model

 1 <input v-model="searchText"> 
 2 
 3 等價於
 4 <input
 5   v-bind:value="searchText"
 6   v-on:input="searchText = $event.target.value"
 7 >
 8 當用在組件上時，v-model 則會這樣：
 9 <custom-input
10   v-bind:value="searchText"
11   v-on:input="searchText = $event"
12 ></custom-input>
13
 
 
14 Vue.component(‘custom-input‘, {
15   props: [‘value‘],
16   template: `
17     <input
18       v-bind:value="value"
19       v-on:input="$emit(‘input‘, $event.target.value)"
20     >
21   `
22 })
23 
24 //父組件
25  <vModel v-model="textValue"  @focus="showValue" class="username-input" placeholder="Enter your username" :a=‘1‘></vModel>
26
 
 //子組件
27 <template>
28         <input type="text" v-bind=‘$attrs‘ :value="value" @input="input">
29 　　 <input :value="value" @change="change">
30 </template>
31 <script>
32 　　
33 inheritAttrs: false, //當在子組件中加入inheritAttrs:false時class等屬性就不會自動加到根元素上了。
34  
35 // model: {
36 // //一個組件上的 v-model 默認會利用名為 value 的 prop 和名為 input 的事件，但是像單選框、復選框
 

37 // //等類型的輸入控件可能會將 value 特性用於不同的目的。model 選項可以用來避免這樣的沖突：
38 // prop: "value",
39 // event: "change"
40 // },
41 　　
42 props: ["value"],
43 　　
44 methods: {
45 input(e) {
46 this.$emit("input", e.target.value);
47 console.log(e.target.value);
48 }
49 // change(e) {
50 // this.$emit("change", e.target.value);
51 // console.log(e.target.value);
52 // }
53 },
54 
55 </script>

.sync修飾符

 1 //父組件
 2  <Sync  v-bind:title.sync="title"></Sync>   等價於       <Sync :title="title" @upDate.title = ‘title=$event‘></Sync>
 3 
 4 
 5 //子組件
 6 <template>
 7 　　<a href="javascript:void(0);" @click="changeValue">{{title}}</a>
 8 </template>
 9 <script>
10 export default {
11 　　props:{
12 　　title:{
13 　　　　default:‘1‘,
14 　　　　type:String
15 　　　}
16 　　},
17 　　data(){
18　　 　　return{
19 
20 　　　　}
21 　　},
22 methods:{
23 　　changeValue(){
24 　　　　this.$emit(‘update:title‘, 11111111)
25 　　　　}
26 　　}
27 }
28 </script>
29 <style lang="sass" scoped>
30 
31 </style>

vue 中 v-model 和 .sync修飾符