vue checkbox复选框组件封装调用

gooood个人博客网站

vue

vue checkbox复选框组件封装调用

父组件引用代码
<Checkbox :total="checkedlist2" :id="'b'" :random="Math.random()" :checked="checkedPhaseItems" type="1" @text="checkboxFn2"></Checkbox> 子组件代码
<template> <div> <template v-if="type==1"> <!-- ['甲级','乙级','丙级'] --> <template v-for="(item,index) in total"> <label :for="id+item"> <input type="checkbox" :id="id+item" v-model="checkedItems" :value = "item"> <template v-if="checkedItems.indexOf(item)>=0"> <i></i> </template> <template v-else> <i></i> </template> <span>{{item}}</span> </label> </template> </template> </div> </template> <script> export default { //列表、id、、随机数、默认值、disabled状态,类型(1、对象数组;2简单数组) props: ["total","id","random","checked","disabled",'type'], data() { return { checkedItems:this.checked, } }, watch: { random(){ this.checkedItems=this.checked; }, checkedItems(newval,oldval) { this.test(); }, }, methods:{ test(){ this.$emit('text',this.checkedItems); }, } } </script>

本文内容由用户注册发布,仅代表作者或来源网站个人观点,不代表本网站的观点和立场,与本网站无关。本网系信息发布平台,仅提供信息存储空间服务,其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本网站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。如因作品内容侵权需删除与其他问题需要同本网联系的,请尽快通过本网的邮箱或电话联系。 
THE END
分享
二维码
< <上一篇
下一篇>>