Dell老师看这个问题

来源：2-14 事件绑定（1）

Dell铁粉

2021-03-19

单向数据流

老师在我的子组件中为什么在标签上的 myData+=1 可以在页面上渲染，然而，定义handleClick(myData) 却没办法实现了

写回答

1回答

Dell铁粉

提问者

2021-03-19

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单向数据流</title>
    <script src="https://unpkg.com/vue@next"></script>

</head>
<body>
    <div id="root"></div>
      <!-- 
        知识点
            1.属性传的时候（变量太长）用content-abc这种命名
            2.接的时候用contentAbc驼峰式来命名，
            3.反过来就不行 不能以驼峰式来传值！！

     -->
</body>
<script>
        const app = Vue.createApp({
            data(){
                return{
                    params:{
                        count : 10,
                        eve:"click"
                    }
                }
            },
            methods:{
                // handleClick(){
                //     this.count += 1
                // }
            },
            // template:
            // `
            //     <counter :count="count" :eve="eve" />
            // `,
            template:
            `
                <counter v-bind="params" />
            `,

        })

        app.component('counter',{

            // props:{
            //     count:{
            //         type:Number,
            //         validator:(value)=>{
            //             console.log( typeof value,this)
            //             // console.log( props )
            //             return value <100
            //         },
            //         default:()=>{
            //             return 999
            //         }
            //     },
            //     eve : {
            //         eve:String
            //     }
            // },

            // --------------
            props:['eve','count'],
                data(){
                    return{
                        
                        myData:this.count
                    }
                },
               
            // --------------
            methods:{
                handleClick(myData,event){
                    // this.emit(")
                    // alert(myData)
                    myData = myData + 1;
                    console.log(myData)
                }
            },
            template:
                 `
                  <div @[eve]="myData+=1">{{myData}}</div>
                `,
                // <div @[eve]=" handleClick(myData)">{{myData}}</div>
           
        })
        const vm = app.mount("#root")
</script>
</html>

Dell

Dell铁粉

报错发我看一下

2021-03-20

共3条回复

Vue3入门与项目实战掌握完整知识体系

明星讲师DELL亲授，全方位知识点+高匹配度项目，入门到深度掌握

3382 学习 · 1454 问题

查看课程

相似问题

老师看这里

回答 3