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