其实自定义组件就是自定义标签。每个标签代表一个组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>chapter 07章节学习测试</title>
<!--必须要引入-->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>
{{msg}}22
</h3>
<hr />
<my-component></my-component>
<p>再使用一次自定定义组件</p>
<my-component></my-component>
</div>
</body>
</html>
<script type="text/javascript">
Vue.component('my-component', {
template: `<div class="comDiv">
<h3>{{msg}}</h3>
<h3>{{msg2}}</h3>
<p>这是组件的内容</p>
<p>这是组件的内容22</p>
</div>`,
//自定义组件中data不同于new Vue()实例
//以函数形式,并且用return返回
data:function(){
return{
msg:'**子组件的内容',
msg2:'**子组件内容22'
}
}
})
var app = new Vue({
el: '#app',
data: {
msg: '组件详解学习',
mycom:{
title:'自定义组件名称',
comtent:'自定义组件内容'
}
}
})
</script>
<style type="text/css">
.comDiv{
background: pink;
50%;
}
</style>