请解答下下面的问题
来源:1-6 父子组件间如何通过事件进行通信(1)
weixin_慕村1291783
2020-12-24 17:28:07
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
count: 1
}
},
methods: {
numAdd(param1) {
this.count = param1
}
},
template: `<div><asd :num="count" @count-add="numAdd"/></div>`
});
app.component('asd', {
// inheritAttrs: false,
props: ['num'],
methods: {
handleItemClick() {
this.$emit('countAdd', this.num + 3) //老师不是说 不可以在子组件中修改父组件的数据吗 ,this.num+3不也是修改了count的值了吗
}
},
template: `<div @click="handleItemClick">{{num}}</div>`
})
const vm = app.mount('#root');
</script>
</html>
1回答
好帮手慕久久
2020-12-24
同学你好,问题解答如下:
num的改变,并不是通过子组件实现的,而是通过父组件改变的。点击子组件时,子组件会触发事件并把this.num+3传出去,而this.num+3并不会改变num的值,因为这不是一个赋值语句(赋值语句是等号(=)),即使子组件中使用赋值语句改变num的值,也无法成功,如下:
实际修改num的是父组件,如下:
祝学习愉快!
相似问题