vue2.0使用props给子组件传递值时用了return 来返回data对象但仍然提示属性未定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script SRC="js/vue.js"></script>
</head>
<body>
<div id="ex">
<parent-component></parent-component>
</div>
<template id="child-component">
   <div>这是子组件{{name}},{{age}}</div>
</template>
<template id="parent-component">
    <div>
        <div>这是父组件{{name}},{{age}}</div>
        <child-component v-bind:my-name="name" v-bind:my-age="age"></child-component>
    </div>
</template>
<script>
    var parent=Vue.extend({
        data:function () {
            return {
                name:"zxf",
                age:25
            }
        },
        template:"#parent-component",
        components:{
            "child-component":{
                template:"#child-component",
                props:['myName','myAge']
            }
        }
    });
    new Vue({
        el:"#ex",
        components:{
                "parent-component":parent
        }
    })
</script>
</body>
</html>

报错信息:图片描述

请问饿是哪里写的不对吗?
为什么仍然提示找不到name属性呢?

阅读 4.7k
1 个回答

你传到子组件的属性名是这个:

props:['myName','myAge']

所以你这里写的有问题

<div>这是子组件{{name}},{{age}}</div>

应该是:

<div>这是子组件{{myName}},{{myNge}}</div>

你的代码应该会有这个警告,组件名中别带component,这是个关键字

[Vue warn]: Do not use built-in or reserved HTML elements as component id: component
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题