<!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属性呢?
你传到子组件的属性名是这个:
所以你这里写的有问题
应该是:
你的代码应该会有这个警告,组件名中别带component,这是个关键字