请解答下下面的问题

来源: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 {

                count1

            }

        },

        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的值,也无法成功,如下:

http://img.mukewang.com/climg/5fe467db09ab063508340475.jpg

http://img.mukewang.com/climg/5fe4681b09cfd05212180299.jpg

实际修改num的是父组件,如下:

http://img.mukewang.com/climg/5fe468e90964433609350487.jpg

祝学习愉快!

0

0 学习 · 15276 问题

查看课程