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>
变量名怎么能有中划线呢,程序区分不了他是不是减号呀。