Dell老师看这个问题-慕课网

1回答

提问者 Dell铁粉 2021-03-19 15:59:13

代码如下

<!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>

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

收起回答

Dell #1
```
()=> handleClick(myData) 这么写呢
```
回复有任何疑惑可以回复我~ 2021-03-19 22:13:42
提问者 Dell铁粉回复 Dell #2
```
老师不行 会报错
```
回复有任何疑惑可以回复我~ 2021-03-19 22:25:06
Dell 回复提问者 Dell铁粉 #3
```
报错发我看一下
```
回复有任何疑惑可以回复我~ 2021-03-20 20:35:03

Dell老师看这个问题

正在回答回答被采纳积分+3

1回答

相似问题

请选择置顶位置

本课精华内容

https://www.fastmock.site/#/project/6581 依旧提示失败或项目不存在

获取本地存储信息报错

老师，如果提取use方法如何传递$event

老师，后台接口访问不了了

上线手在用电脑打开无法显示图片

【学习任务】还原设计稿个人信息页面，并实现登出功能

【学习任务】结合增删改查逻辑，实现地址功能编辑页面

【学习任务】结合本地购物车数据，完成多店铺购物车页面开发

【讨论题】说说你在进行移动端开发时，遇到问题及解决方案

【讨论题】Composition API使用时会注意哪些方面

热搜

最近搜索清空

Dell老师看这个问题

正在回答 回答被采纳积分+3

1回答

相似问题

请选择置顶位置

本课精华内容

https://www.fastmock.site/#/project/6581 依旧提示失败或项目不存在

获取本地存储信息报错

老师，如果提取use方法如何传递$event

老师，后台接口访问不了了

上线手在用电脑打开无法显示图片

【学习任务】还原设计稿个人信息页面，并实现登出功能

【学习任务】结合增删改查逻辑，实现地址功能编辑页面

【学习任务】结合本地购物车数据，完成多店铺购物车页面开发

【讨论题】说说你在进行移动端开发时，遇到问题及解决方案

【讨论题】Composition API使用时会注意哪些方面

正在回答回答被采纳积分+3