组件是可复用的Vue实例,vue里面用到组件的好处主要是提高代码的复用率,便于后期管理维护代码。
- 注册组件(三种方法)
- 注册组件,传入一个扩展过的构造器
Vue.component("v-header",Vue.extend({ })) - 注册组件,传入一个选项对象(自动调用 Vue.extend)
Vue.component("v-footer",{ }) - vue实例化中components { ‘组件名’: 组件内容 }
components:{
"v-con":{
template:"<div><h2>container</h2></div>"
}
}
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../8-20/js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
<v-header></v-header>
<v-con></v-con>
<v-footer></v-footer>
</div>
</body>
<script type="text/javascript">
// 1.注册组件,传入一个扩展过的构造器
Vue.component("v-header",Vue.extend({
template:"<div><h1>hello header</h1></div>"
}))
//2. 注册组件,传入一个选项对象(自动调用 Vue.extend)
Vue.component("v-footer",{
template:"<div><h3>hi footer</h3></div>"
})
// 获取注册的组件(始终返回构造器)
var MyComponent = Vue.component('v-header')
console.log(MyComponent)
var vm = new Vue({
el:"#out",
data:{
},
//3.vue实例化 中 components { ‘组件名’: 组件内容 }
//私有组件
components:{
"v-con":{
template:"<div><h2>container</h2></div>"
}
}
})
</script>
</html>
- 下面是一个组件注册的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="outer">
<h1>{{tit}}</h1>
<hr />
<v-header></v-header>
<v-content></v-content>
<v-footer></v-footer>
<hr />
<v-demo></v-demo>
</div>
</body>
<script type="text/javascript">
Vue.component("v-header",Vue.extend({
template:"<h1>hello</h1>"
}))
Vue.component("v-footer",({
template:"<h2>hi</h2>"
}))
Vue.component("v-demo",({
template:"<h1 @click='run()'>这是一个头部组件11--{{name}}--{{msg}}</h1>",
data:function(){
return {
name:"张三",
msg:"he is Lisi's friend",
i:0
}
},
methods:{
run(){
// console.log(this.i++)
this.i++;
if(this.i%2==0){
this.name="王二";
color="red";
this.msg="He is Zhangsan's friend"
}else{
this.name="张三";
this.msg="He is Lisi's friend"
}
}
}
}))
var vm = new Vue({
el:"#outer",
data:{
tit:"你好啊---"
},
components:{
'v-content':{
template:"<h2>--我是内容---</h2>"
}
}
})
</script>
</html>
- vue定义模板的方式有两种
-
<script type=“x-template” id=“header”>内容内容 </script>
template:'#header’
-
<template id=“footer”>内容内容 </template>
template:'#footer’
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
<h2>组件</h2>
<v-header></v-header>
<hr />
<v-footer></v-footer>
<hr />
<v-con></v-con>
</div>
<div id="inner">
<v-header></v-header>
<!--<v-con></v-con>-->
</div>
<!--定义模板的方式一-->
<script type="x-template" id="con">
<div>
<h1>hello -- {{str}}</h1>
</div>
</script>
<!--定义模板的方式二-->
<template id="footer">
<div>
<h1>helo</h1>
<div>另一个组件--hello</div>
</div>
</template>
</body>
<script type="text/javascript">
Vue.component('v-header',Vue.extend({
template:`<div>
<div>hello 组件</div>
<div>hi---{{str}}</div>
<button @click="tap()">更改数据</button>
</div>`,
data:function(){
return{
str:'数据'
}
},
methods:{
tap(){
this.str='你好'
}
},
mounted(){
console.log('组件挂载完成')
}
}))
var com=Vue.component('v-footer',{
template:'#footer'
})
// console.log(com)
var vm=new Vue({
el:'#out',
data:{
},
methods:{
},
components:{
'v-con':{
template:'#con',
data:function(){
return{
str:'hi'
}
}
}
}
})
var vm1=new Vue({
el:'#inner'
})
</script>
</html>
组件之间的嵌套也是很常用的,下面是基本写法
components:{
'v-header':{
template:'#header',
data:function(){
return {
msg:'这是一个header组件的数据'
}
},
components:{ /*组件里面嵌套组件*/
'v-nav':{
template:'#nav',
}
}
}
}