1、创建子组件
//1.创建第1个组件构造器对象(子组件)
const cpnC1 = Vue.extend({
//...
});
2、创建父组件,并调用
//2.创建第2个组件构造器对象(父组件)
const cpnC2 = Vue.extend({
//注意,使用了tab键上面的反斜杠``,因而可以换行定义
template: `
<div>
<h2>我是标题2</h2>
<p>这是内容,第2个组件1</p>
<cpn1></cpn1>
</div>`,
// 父子组件
components:{
cpn1: cpnC1
}
});
3、注册父组件
//root组件
const chen1 = new Vue({
el: '#app', //用于挂载要管理的元素
data:{//定义数据
message:'你好啊,helloword',
isShow: true
},
// // 以下是局部组件的用法
// components:{
// my_cpn1: cpnC1,
// my_cpn2: cpnC2
// }
// 父子组件
components:{
cpn2: cpnC2
}
});
4、完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title-hellovuejs</title>
</head>
<body>
<div id ="app">
<!-- 3.使用组件 -->
<cpn2></cpn2>
</div>
<script src="../js/vue.js"></script>
<script>
//1.创建第1个组件构造器对象(子组件)
const cpnC1 = Vue.extend({
//注意,使用了tab键上面的反斜杠``,因而可以换行定义
template: `
<div>
<h2>我是标题1</h2>
<p>这是内容,第1个组件1</p>
</div>`
});
//2.创建第2个组件构造器对象(父组件)
const cpnC2 = Vue.extend({
//注意,使用了tab键上面的反斜杠``,因而可以换行定义
template: `
<div>
<h2>我是标题2</h2>
<p>这是内容,第2个组件1</p>
<cpn1></cpn1>
</div>`,
// 父子组件
components:{
cpn1: cpnC1
}
});
// //2.注册组件
// Vue.component('my-cpn',cpnC);
//root组件
const chen1 = new Vue({
el: '#app', //用于挂载要管理的元素
data:{//定义数据
message:'你好啊,helloword',
isShow: true
},
// // 以下是局部组件的用法
// components:{
// my_cpn1: cpnC1,
// my_cpn2: cpnC2
// }
// 父子组件
components:{
cpn2: cpnC2
}
});
</script>
</body>