导入外部的component，在component中使用v-for报错

Question

定义了一个组件radio,模板保存在radio.vue中，在create.vue中进行调用
radio.vue如下

<template>
    <div class="radio"> {{item.title}}</div>
</template>

组件定义：

import radio from  '../components/radio.vue';
module.exports = {
    data : function(){
        proInfo : [{
                    type:'radio',
                    title:'sss',
                    options:['ee','rr']
                }],
    },
    components : {
            'radio' : {
                template : radio,
                props : ['item'],
                }
            }
}

调用组件

<radio  v-for="item in proInfo" :item="item"  ></radio>

浏览器中运行报错：

如果把radio.vue中的内容直接粘贴在

template : ` <div class="radio"> {{item.title}}</div>`

这样就不会报错。但是是为什么呢？求解

Answer 1

在radio.vue中需要先定义props,再通过props传数据。你有定义item吗？
比如：

    props:{
        item: null,
    },