使用$attrs和$listeners将value2属性透传给子组件，并通过props和自定义事件来实现子组件修改父组件中value2属性

// 父组件
<template>
  <div>
    <p>value1: {{ value1 }}</p>
    <p>value2: {{ value2 }}</p>
    <child-b :color="color" :value2.sync="value2" v-bind="$attrs" v-on="$listeners" />
  </div>
</template>

<script>
import ChildB from './ChildB.vue'

export default {
  components: { ChildB },
  data() {
    return {
      color: 'red',
      value1: 'hello',
      value2: false,
    }
  },
  methods: {
    setColor(color) {
      this.color = color
    },
  },
}
</script>

// 子组件 ChildB.vue
<template>
  <button @click="handleChange">{{ value }}</button>
</template>

<script>
export default {
  props: {
    color: String,
    value2: Boolean,
  },
  computed: {
    value() {
      return this.value2 ? 'ON' : 'OFF'
    },
  },
  methods: {
    handleChange() {
      this.\$emit('update:value2', !this.value2)
    },
  },
}
</script>

在父组件中，将value2属性作为props传递给ChildB组件，并使用.sync语法糖将其转换为一个带有.sync后缀的props，表示这是一个可双向绑定的属性。同时，使用v-bind="$attrs"和v-on="$listeners"将父组件中自定义的attributes和事件透传给子组件。

在子组件中，通过接受父组件传递过来的props来获取value2属性，并将其作为计算属性value的值展示在页面上。当用户点击按钮时，通过调用handleChange方法触发update:value2自定义事件，并将新的value2属性值以参数的方式传递给父组件。此时，父组件会触发value2属性的更新操作，并修改该属性的值。子组件又会从父组件中重新获取最新的value2属性值，并更新页面展示的内容。