jzx_606 2020-03-15 23:37 采纳率: 100%
浏览 860

Vue子组件没法传值给父组件,一直报错

请教下各位大佬@choose=changeEvent到底哪里定义错了,一直想不通

<!DOCTYPE html>
<html lang = "en" >
    <head >
        <meta charset = "UTF-8" >
        <title >Title</title >
        <style >

        </style >
    </head >
    <body >
        <div id="app">
            <ul>
               <school v-for="item ,index in schoolList" :school-name="item"
                       :key="'avc'+index" :index="index" @choose="changeEvent"> </school>
            </ul>


            <h2>选中的学校是{{chooseSchool}}</h2>
        </div>

        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript" >
            Vue.component("school",{
                props:["schoolName"],
                template:
               ` <li>
                <h3>学校名称:{{schoolName}}</h3>
                <button v-on:click="chooseEvent(schoolName)" >选择学校</button>
                </li>`,

                methods:{
                    chooseEvent:function (schoolName) {

                        this.$emit('choose',schoolName);

                    },

                },
            });


            const app=new Vue({
                el:"#app",
                data:{
                    chooseSchool:"",
                    schoolList:["清华大学","北京大学","东京大学"],
                    methods:{
                        changeEvent:function (data) {
                            console.log("hahha");
                            this.chooseSchool=data;

                        }
                    }
                }
            })
        </script >
    </body >
</html >
  • 写回答

1条回答 默认 最新

  • console.log( ) 2020-03-16 10:27
    关注

    methods 写在了data里面,写在外面就好了

     data:{
                        chooseSchool:"",
                        schoolList:["清华大学","北京大学","东京大学"],
                        methods:{
                            changeEvent:function (data) {
                                console.log("hahha");
                                this.chooseSchool=data;
    
                            }
                        }
                    }
    
    评论

报告相同问题?

悬赏问题

  • ¥15 用三极管设计—个共射极放大电路
  • ¥15 请完成下列相关问题!
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?
  • ¥15 求daily translation(DT)偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的?
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示