标签：for 复选框 add == 拆分 传递 events custom data
//比如<ppx v-bind:data="arr"></ppx> //简写<ppx :data="arr">
子组件通过props来接收数据
//props:[‘data‘]
最后使用即可
//{{data}}
注意：
自定义属性不要和子组件数据名称一样
<div id="app"> <!-- arr 是父组件的--> <ppx :data="arr"></ppx> </div>
1 let obj = { 2 props:[‘data‘], 3 template:` 4 <ul> 5 <li v-for="(val,key) in data"> 6 {{val}} 7 </li> 8 </ul> 9 `, 10 data(){ 11 return { 12 val:‘我是子组件‘ 13 } 14 } 15 } 16 17 Vue.component(‘ppx‘,obj); 18 new Vue({ 19 el:‘#app‘, 20 data:{ 21 arr:[111,222,333] 22 } 23 });
子级传递父级
1 change(){ 2 this.$emit(‘customev‘,id,xxx) 3 }
<div id="app"> <h2>父组件</h2> <input type="text" v-model="val" @keyup.13="add" > {{arr}} <h4>子组件</h4> <ppx :data="arr" @changebool="ck"></ppx> </div>
1 let obj={ 2 props:{ 3 data:{ 4 type:Array, 5 default:[] 6 } 7 }, 8 template:` 9 <div> 10 <ul> 11 <li v-for="(val,key) in data"> 12 <input type="checkbox" @click="changeC(val.id,$event)"> 13 <span>{{val.name}}</span> 14 </li> 15 </ul> 16 </div> 17 `, 18 methods:{ 19 changeC(id,ev){ 20 //自定义的changebool事件，触发时候执行ck 21 this.$emit(‘changebool‘,id,ev.target.checked); 22 } 23 } 24 } 25 Vue.component(‘ppx‘,obj); 26 new Vue({ 27 el:‘#app‘, 28 data:{ 29 val:‘‘, 30 arr:[ 31 { 32 id:0, 33 name:‘巴黎‘, 34 checked:false 35 }, 36 { 37 id:1, 38 name:‘东京‘, 39 checked:false 40 }, 41 { 42 id:2, 43 name:‘伦敦‘, 44 checked:true 45 }, 46 { 47 id:3, 48 name:‘悉尼‘, 49 checked:false 50 } 51 ] 52 }, 53 methods:{ 54 add(){ 55 this.arr.push({ 56 id:+new Date,//隐式类型转换,可以把字符串转成数字类型 57 name:this.val, 58 checked:false 59 }); 60 this.val = ‘‘; 61 }, 62 ck(id,bool){ 63 this.arr.forEach(e=>{ 64 //如果当前的id 等于 id 就把当前数据的checked 赋给 bool 65 if(e.id === id){ 66 e.checked = bool; 67 } 68 }) 69 } 70 } 71 });
另一种方法
<div id="app"> <h2>父级的</h2> <input type="text" v-model="val" @keyup.13="add"> {{arr}} <hr> <h2>子组件</h2> <list :data="arr" :k="kk" @getchilddata="changeC"></list> </div>
1 let obj = { 2 template:` 3 <div> 4 <ul> 5 <li v-for="(val,key) in cd"> 6 <input 7 type="checkbox" 8 @change="changeFn(val.id)" 9 > 10 <span>{{val.txt}}</span> 11 </li> 12 </ul> 13 {{cd}} 14 </div> 15 `, 16 methods:{ 17 changeFn(id){ 18 let b; 19 this.cd.forEach(data => { 20 if(data.id === id){ 21 data.checked = !data.checked; 22 b = data.checked; 23 } 24 }); 25 26 this.$emit(‘getchilddata‘,id,b); 27 console.log(this.cd); 28 29 } 30 }, 31 props:[‘data‘,‘k‘], 32 data(){ 33 return { 34 cd:JSON.parse(JSON.stringify(this.data)) 35 } 36 } 37 } 38 39 Vue.component(‘list‘,obj); 40 41 new Vue({ 42 el:‘#app‘, 43 data:{ 44 kk:‘变‘, 45 val:‘‘, 46 arr:[ 47 { 48 id:0, 49 txt:‘小明‘, 50 checked:false 51 }, 52 { 53 id:1, 54 txt:‘小红‘, 55 checked:false 56 }, 57 { 58 id:2, 59 txt:‘小刚‘, 60 checked:false 61 } 62 ] 63 } 64 ,methods:{ 65 add(){ 66 this.arr.push({ 67 id: +new Date, 68 txt:this.val, 69 checked:false 70 }); 71 this.val = ‘‘; 72 }, 73 changeC(id,bool){ 74 this.arr.forEach(e=>{ 75 if(e.id === id){ 76 e.checked = bool; 77 }; 78 }); 79 } 80 } 81 });
标签：for 复选框 add == 拆分 传递 events custom data
原文地址：https://www.cnblogs.com/theblogs/p/10355755.html
