Vue.js报错：Property or method “XXX“ is not defined on the instance but referenced during render. .....

今天学习vue组件的时候发现控制台出现报错，意思是属性或方法没有在实例上定义。然后看了看源码，发现

应该是stuList而不是list，改正后不再报错。

完整代码：

<body>
    <div id="box">
        <my-component :stu-list="list" @delid="doDel"></my-component>
    </div>
    <script>
        Vue.component('my-component', {
            props: ['stuList'],
            template: `
                <div>
                    <ul>
                        <li v-for="(stu, index) in stuList" :key="index">
                            {{stu.name}} - {{stu.age}}
                            <button @click="del(index)">删除</button>
                        </li>
                    </ul>
                </div>
            `,
            methods: {
                del: function (value) {
                    this.$emit('delid', value);
                }
            }
        })
        var vm = new Vue({
            el: '#box',
            data: {
                list: [
                    {
                        name: '张三',
                        age: 20
                    },
                    {
                        name: '李四',
                        age: 21
                    },
                    {
                        name: '王五',
                        age: 19
                    }
                ]
            },
            methods: {
                doDel: function (value) {
                    this.list.splice(value, 1);
                }
            }
        })
    </script>
</body>

结果：

👍