业务组件-CheckBox

文章目录

• 业务组件-CheckBox
• • 1.组件说明
  • 2.Props
  • 3.data
  • 4.Events（子组件 -> 父组件）
  • 4.父子组件相互通信
  • • 实现方法

1.组件说明

下拉框，可以单选或多选

2.Props

3.data

4.Events（子组件 -> 父组件）

实现代码：

methods: {handleSelectedChange(val){this.$emit('input', val)}
} 

4.父子组件相互通信

业务场景：
当处于“查看”记录时，父组件取得后端数据后，将数据传给业务组件，让其在前端展示，这是典型的父传子；
当对该记录进行编辑时，会在前端重新选择下拉框的值，并将重新 选择到的值又返回给父组件，这就是子传父；

解决思路：
组件间的传值，想到的是Props（父传子），再通过$emit（子传父）即满足要求；
父组件除了与业务组件传值，其实它自己本身也需要与自身的data进行传值，因为它还需要取得后端的数据，
且父组件接收到业务组件重新选值后，还需要将新值再返回给后端更新；
那不能在父组件中定义v-model同时满足自已需求，也能传值给到业务组件呢？

实现方法

• 父组件定义v-model

• 业务组件重新定义父组件的v-model，用于获取父组件的v-model的值

model: { // 此model内定义的prop默认重新定义父组件v-model中的value属性,变成data属性prop: 'data'// event: 'change' //也可以重新定义父组件v-model中的input的事件名,变成change事件名},
props: {// 来自父组件已选中数据；如果是单选，data为String, 如果是复选，则data为Arraydata:[String,Array]//这个与上面的model的prop是一一对应的

• 业务组件获取到父组件值后，需要将其值给到业务组件自己的value

  //业务组件中的template部分

// 业务组件script部分
// 为啥要设置wathc是因为mounted只会加载一次，当this.data变化时，不会重新加载，所以需要启用到wathc监听
watch: {data() {this.selectedData = this.data}
},
created() {this.selectedData = this.data
},

• 业务重新选值后，需要将值再传给父组件

methods: {handleSelectedChange(val){this.$emit('input', val) // 'input'是父组件v-model中自带的事件名}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！