很乱，临时保存，自定义v-model

时间 2020-05-31

标签临时保存自定义 model 繁體版

原文原文链接

 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 })