<!-- 子组件SelectArea -->
<template> <div class="select-area"> <van-checkbox-group v-model="result"> <van-checkbox name="a">复选框 a</van-checkbox> <van-checkbox name="b">复选框 b</van-checkbox> <van-checkbox name="c">复选框 c</van-checkbox> </van-checkbox-group> </div> </template> <script> /** @description:双向绑定 **/ export default { props: { // 组件实现双向绑定 value: { type: Array, default() { return [] }, }, }, computed: { result: { get() { return this.value }, set(val) { this.$emit(‘input‘, val) }, }, }, } </script>
<!-- 子组件Model -->
<template> <div> <input :value="value" @input="handlerChange" /> </div> </template> <script> /** @description:input实现双向绑定 **/ export default { props: [‘value‘], // 可以修改事件名,默认为 input model: { event: ‘updateValue‘, }, methods: { handlerChange(e) { this.$emit(‘updateValue‘, e.target.value) }, }, } </script>
父组件引用
<template> <div class="home"> <Model v-model="value" /> {{ value }} <SelectArea v-model="result" /> {{ result }} </div> </template> <script> import Model from ‘@/components/demo/Model‘ import SelectArea from ‘@/components/demo/SelectArea‘
export default { components: { Model, SelectArea, }, data() { return { value: 1, result: [], } }, } </script>
效果图