<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{des}}</h2>
<!-- des是一个变量名里边存着子组件需要的数据 des在ccc中存着 ccc放到子组件的props之后子组件就可以收到父组件的值了-->
<!-- 一个子组件下边只能有一个标签 其余的都是后代标签-->
<h-nav :ccc="des"></h-nav>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
let wBanner = {
template: `
<h3>{{qqq}}<br>{{zq}}</h3>
`,
data(){
return {
qqq:"这是孙组件的值"
}
},
props: ["zq"]
}
let hNav = {
template:`
<div>
<h2 style="color: red">{{info}} {{ccc}}</h2>
<w-banner :zq="qqq"></w-banner>
</div>
`,
data(){
return {
info:"子组件的值",
qqq:"子组件的qwe"
}
},
props:["ccc"],
components: {
wBanner:wBanner
}
};
new Vue({
el:"#app",
data(){
return {
des:"父组件的值"
}
},
components:{
hNav: hNav
}
})
</script>
</body>
</html>
Python3Turtle