jzx_606
jzx_606
采纳率81.8%
2020-03-15 23:37 阅读 652

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条回答 默认 最新

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

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

     data:{
                        chooseSchool:"",
                        schoolList:["清华大学","北京大学","东京大学"],
                        methods:{
                            changeEvent:function (data) {
                                console.log("hahha");
                                this.chooseSchool=data;
    
                            }
                        }
                    }
    
    点赞 评论 复制链接分享

相关推荐