非 Prop 的 Attribute

App.vue

<props-test
    id="sss"
    :data-show="'activated'"
    @change="showChange"
    msg1="msg-ssss"
    msg2="msg-aaaa"
  ></props-test>

PropsTest.vue

<template>
  <div>
    <!-- <div class="propsTest" :="$attrs" @click="changePros">data-status="activated"</div>
    
    <input type="datetime-local" :="$attrs" /> -->
    <!-- <div>
      <select>
        <option value="1">Yesterday</option>
        <option value="2">Today</option>
        <option value="3">Tomorrow</option>
      </select>
    </div>
    <div>
      <input type="text" />
    </div> -->
    <header>header</header>
    <main v-bind="$attrs">main</main>
    <footer>footer</footer>
  </div>
</template>

<script>
import { toRaw } from 'vue';
export default {
  name: 'PropsTest',
  // inheritAttrs: false,
  props: ['msg1', 'msg2'],
  setup(props) {
    console.log('props', props);
    
    const changePros = (e) => {
      // console.log('e-changePros',e.target.attributes['data-v'].value);
      console.log('e-changePros',e);      
    }
    return {
      changePros
    }
  },
  created() {
    console.log("this.$attrs", this.$attrs);
    console.log("toRaw---this.$attrs", toRaw(this.$attrs));
  },
};
</script>

<style lang="scss" scoped>
.propsTest {
  color: red;
}
// [data-show=activated] {
//   display: none;
// }
</style>