1.要引入vue.js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<parent>
</parent>
</div>
<script src="../vue.js"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
},
components: {
"parent": {
data() {
return {
name: "这个是父组件",
str:"litingchen"
}
},
template: '<div><p>父组件</p><h1 v-text="name"></h1><chlid :a="name" :b="str"></chlid></div>',
components: {
"chlid": {
props:["a","b"],
data() {
return {
na:"这个是子组件"
}
},
template: '<div><p>子组件</p><h2 v-text="na"></h2><p>{{"这个是父组件的数据:"+a}}</p></div>'
}
}
}
}
})
</script>
</body>
</html>