请稍等 ...

为什么我在子组件里面data函数里return里面的this不能指向count啊

data:function(){
return{
number:this.count
//this无法指向count对象？？？？？？
}
},

qq_慕码人4001776 2020-04-14 22:17:33

源自：4-2 父子组件间的数据传递

679

收起

提交取消

2回答

呀呀呀亚歌回答被采纳获得+3积分 2020-04-15 13:32:00

      var counter = {
        props: ['count'],
        template: '<div @click="handle">{{number}}</div>',
        data: function () {
          return {
            number: this.count,
          };
        },
        methods: {
          handle: function () {
            this.number += 2;
            this.$emit('inc', 2);
          },
        },
      };

按照你的逻辑，应该是这样吧，就是在组件里面应该是number，不是count，从父组件传来的值是不可以修改的，所以template里面应该是number，你再试试

0 回复有任何疑惑可以回复我~

收起回答

提问者 qq_慕码人4001776 #1
```
应该是的
```
回复有任何疑惑可以回复我~ 2020-04-15 16:56:04

呀呀呀亚歌 2020-04-14 23:22:20

data里面是用来定义数据的，贴下代码，看下count是哪里的

0 回复有任何疑惑可以回复我~

收起回答

提问者 qq_慕码人4001776 #1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nana</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <counter :count="0" @inc="handlel"></counter>
        <counter :count="1" @inc="handlel"></counter>
        <div>{{total}}</div>
    </div>
    <script>
        var counter={
            props:['count'],
            template:'<div @click="handle">{{count}}</div>',
            data:function(){
                return{
                    number:this.count
                } 

            },
            methods:{handle:function(){
                this.number+=2;
                this.$emit('inc',2)
            }

            }
            
        }
        var vm=new Vue({
            el:"#app",
            data:{
                total:5
            },
            components:{
                counter:counter
            },
            methods:{handlel:function(step){
                this.total+=step

            }}

        })
    </script>
</body>
</html>
//谢谢了

回复有任何疑惑可以回复我~ 2020-04-15 06:28:25