vue 小白不懂错哪，求解说

Question

App.vue

  <div class="hello" @click="ff">
    <demo :first="firstMsg" :data-second="secondMsg"></demo>
    <demo :first="firstMsg" :data-second="secondMsg"></demo>
    <demo :first="firstMsg" :data-second="secondMsg"></demo>
    <demo :first="firstMsg" :data-second="secondMsg"></demo>
  </div>
</template>

<script>
import Demo from "./components/Demo.vue";
export default {
  name: "hello",
  components: {
    Demo
  },
  data() {
    return {
      firstMsg: "first props",
      secondMsg: "secondMsg"
    };
  },
  methods: {
    ff(e) {
      if (e.target.dataset.second == "secondMsg") {
        console.log("通过事件委托拿到了自定义属性");
      }
    }
  }
};
</script>

Demo.vue

<template>
  <div>
    <div>{{first}}</div>
    <child v-bind="$attrs"></child>
  </div>
</template>
<script>
import child from "./nextChild.vue";
export default {
  name: "demo",
  props: ["first"],
  inheritAttrs: false,
  created() {
    console.log(this.$attrs);
  },
  components: {
    child
  }
};
</script>

nextChild.vue

<template>
  <div>{{data-second}}</div>
</template>

<script>
export default {
  name: "child",
  props: ["data-second"],
  created() {
    console.log("孙子组件", this.$attrs);
  }
};
</script>

Answer 1

变量名怎么能有中划线呢，程序区分不了他是不是减号呀。