11-父子组件注册
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./js/vue.min.js"></script>
<title></title>
</head>
<body>
<div id="app1">
<cpn2></cpn2> <!-- 使用父组件 -->
</div>
<script>
// 创建子组件构造
const cpnC1 = Vue.extend({
template:`
<div><h1> 这是子组件</h1></div>
`
})
// 创建父组件构造
const cpnC2= Vue.extend({
template:`
<div><h1> 这是父组件</h1>
<cpn1></cpn1>
</div>
`,
// 在父组件的template中调用子组件,并且只能在父组件中调用
// 注册子组件
components:{
cpn1 : cpnC1
}
})
const app = new Vue({
el:'#app1',
data(){
return{
}
},
// 注册父组件
components:{
cpn2:cpnC2
}
})
</script>
</body>
</html>
1049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
