Vuejs 的组件化开发

chenxin · 7年前

老是报错vue.min.js:6 Uncaught ReferenceError: message is not defined(…)感觉今天莫名奇妙的.....帮我瞅瞅哪里的问题啊，组件里面的message居然说没有定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue2.0</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="col-md-8 col-md-offset-2 text-center" id="app">
    <item-component :message="messages"></item-component>
</div>
</body>

<script src="//cdn.bootcss.com/vue/2.0.0/vue.min.js"></script>
<script type="text/x-template" id="template">
    <ul>
        <li v-for="msg in message">{ msg.title }</li>
    </ul>
</script>

<script>
    Vue.component('item-component', {
        template: '#template',
        prpos: ['message'],
    })
    new Vue({
        el: '#app',
        data: {
            messages: [
                {title: '组件化开发测试!', id: 1},
                {title: 'Hello!', id: 2},
            ]
        },
    })
</script>
</html>