很亂，臨時儲存，自定義v-model

c3tc3tc3t發表於2018-02-10
 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6     <title>learn1</title>
 7   </head>
 8   <body>
 9 
10 
11       <template    id="hello">
12           <h1>{{msg}}    {{user}}</h1>
13       </template>
14 
15       <template    id="form">
16           <div>
17               <input    :value="value"    type="text"    id="name"    v-on:input="onInput">
18           </div>
19       </template>
20 
21       <template id='c'>
22         <input type="checkbox"    v-on:change="onChange"/>
23       </template>
24 
25       <template    id="greetings">
26           <div>
27               <my-checkbox v-model='f' value="some value" ></my-checkbox>
28               <h1>{{f}}</h1>
29               <hr>
30               //此處v-model=kk,目的是zz子元件將自己的值傳遞給父元件的hk
31               //kk=112，是將父元件的112,或者父元件的其他值傳遞給子元件
32               //也就是說在自定義模板上定義v-mode目的是向外傳遞
33               //kk=112或其他類似屬性，目的是向內傳遞給自己定義的模板的屬性
34               <zz v-model='hk' kk="112"></zz>
35           </div>
36       </template>
37 
38       <template id="fff" >
39         <label>
40           //這裡的:checked是input自帶屬性，不是我們定義的，它接收checkval方法計算的值
41           //:kk="kk"對應上面的 zz標籤裡的 kk=112，可以理解將112傳遞給kk,kk傳遞給:kk
             //這個 checkval是計算屬性，將計算結果傳遞給:checked，這個checkVal作用是，在父元件裡使用子元件，在子元件上的v-model上的值傳遞給子元件

42           <input type="radio" :checked="checkVal" :kk="kk" @change="update">
43           {{ modelVal }}
44         </label>
45       </template>
46 
47     <div    id="app">
48         <greetings-component></greetings-component>
49     </div>
50     <!-- built files will be auto injected -->
51   </body>
52 </html>
  1 // The Vue build version to load with the `import` command
  2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  3 import Vue from 'vue'
  4 import router from './router'
  5 //import ElementUI from 'element-ui'
  6 //import 'element-ui/lib/theme-chalk/index.css'
  7 
  8 //import App from './App'
  9 
 10 Vue.config.productionTip = false
 11 //Vue.use(ElementUI)
 12 
 13 
 14 Vue.component('hello-component',    {
 15   template: '#hello',
 16   data:    function    ()    {
 17       return    {
 18           msg:    'Hello'
 19       }
 20   },
 21   props:    ['user']
 22 });
 23 
 24 
 25 Vue.component('form-component',    {
 26   template:    '#form',
 27   props:    ['value'],
 28   methods:    {
 29     onInput:    function    ()    {
 30         this.$emit('input',    event.target.value)
 31     }
 32 }
 33 });
 34 
 35 Vue.component('zz',{
 36   template:'#fff',
 37   model: {
 38     //這裡的modlVal ，如果不自己定義，預設是prop:'value'，input類似標籤
 39     //將值存進value裡，我們宣告瞭ModelVal，就不存進value裡，而是存進modelVal裡
 40     prop: 'modelVal',
 41     event: 'change'
 42   },
 43   props: {
 44     value: {
 45       type: Boolean,
 46     },
 47     modelVal: {
 48       default: ""
 49     },
 50     label: {
 51       type: String
 52     },kk:{
 53       type:String
 54     }
 55   },
 56   computed: {
 57     checkVal() {
 58       console.log("----------")
 59       console.log(this.modelVal)
 60       console.log(this.kk)
 61       console.log("----------")
 62       console.log( this.modelVal === this.value)
 63       return this.modelVal === this.value
 64     }
 65   },
 66   methods: {
 67     update() {
 68       this.$emit('change', this.checkVal)
 69     }}
 70 })
 71 
 72 Vue.component('my-checkbox', {
 73   template:'#c',
 74   model: {
 75     //這裡就是hello儲存true或者false ，替代false
 76     prop: 'hello',
 77     event: 'change'
 78   },
 79   props: {
 80     hello:Boolean, //這裡也要先宣告hello，
 81     value: String
 82   },
 83   methods:{
 84     onChange () {
 85       console.log(this.hello)
 86       console.log(this.value)
 87       console.log(event.target.checked)
 88         this.$emit('change',event.target.checked)
 89 
 90     }
 91   }
 92 })
 93 
 94 Vue.component('greetings-component',    {
 95   template:    '#greetings',
 96   data:    function    ()    {
 97       return    {
 98           user:    'heroaa',
 99           foo:'hello',
100           f:true,
101           world:'world',
102           hk:"",
103           modelVal:''
104       }
105   },
106   methods:{
107     get (v) {
108       console.log(v)
109     }
110   }
111 });
112 
113 /* eslint-disable no-new */
114 new Vue({
115   el: '#app',
116   data:{
117     user:'hero'
118   }
119 })

 

相關文章