Vue子组件无法向父组件传值，一直报定义的有错误

Question

Vue子组件无法向父组件传值，一直报定义的有错误

发布于
2020-03-15

更新于
2020-03-15

请教下各位大佬@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 >

前端 vue.js

阅读 1.8k

1 个回答

得票最新

狂四郎

124

发布于
2020-03-16

搞清楚原因了把methods放到了data里面去导致报错

撰写回答