本来是在学习事件修饰符
实操时发现如这样的写法是无法触发father节点的click事件的:
<body>
<div id="father" @click="alertFather" >
father
<div id="son" @click="alertChild">
son
</div>
</div>
<script>
const msg={
methods: {
alertChild(){
alert("child")
},
alertFather(){
alert("Father")
}
}
}
Vue.createApp(msg).mount("#father")
</script>
</body>
点击外层没有触发事件,点击内层只会调用一次alertChild。
打开控制台发现<div id="father" @click="alertFather" >并没有被vue渲染
假如我再嵌套一层div,将外层的click事件放在中间层的div上,就可以正常运行:
<body>
<div id="father" >
<div @click="alertFather">
father
<div id="son" @click="alertChild">
son
</div>
</div>
</div>
<script>
const msg={
methods: {
alertChild(){
alert("child")
},
alertFather(){
alert("Father")
}
}
}
Vue.createApp(msg).mount("#father")
</script>
</body>
似乎不能再挂载点添加事件,这是为什么?