组件
组件概念:
html、css与js的集合,为该集合体命名,用该名字复用html、css与js组成的集合体构成复用性。
组件分类:
根组件:new Vue()生成的组件
局部组件:组件名={},{}内部采用的是部Vue语法
全局组件:Vue.component(‘组件名’,{}),{}内部采用的是Vue语法
组件的特点:
1、组件都有管理组件HTML页面结果的template实例成员,template中有且只有一个根标签;
2、根组件都是作为最顶级层的父组件,局部与全局组件作为子组件,也可以成为其他局部与全局父组件;
3、子组件的数据需要隔离(数据组件化,每一个组件拥有自己的数据独立名称空间);
4、局部组件必须注册后才能使用,全局组件不需要注册,提倡使用局部组件
下面看一个小例子
<div id="app">
{{msg}}
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'信息组件 '
},
template:'<p>{{msg}}</p>>'
})
</script>
上面的{{msg}}被下面的template内的p标签替换了
局部组件与全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body,h2{
margin: 0;
}
.warp{
800px;
margin: 0 auto;
}
.warp:after{
content: '';
display: block;
clear: both;
}
.box{
200px;
border-radius: 10px;
overflow: hidden;
background-color: peachpuff;
float: left;
margin: 10px;
}
.box img{
100%;
}
.box h2{
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="warp">
<!--渲染组件-->
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//声明局部组件:局部组件要在其父组件中注册才能使用
//1、声明组件,2、注册组件,3、渲染组件,全局组件不需注册
//声明局部组件
let localTag={
template:`
<div class="box" @click="fn">
<img src="img/001.jpg" alt="">
<h2>焰灵姬</h2>
</div>>
`,
};
//声明全局组件
Vue.component('global-tag',{
template:`
<div class="box">
<img src="img/002.jpg" alt="">
<h2>紫女</h2>
</div>
`,
});
new Vue({
el:'#app',
data:{},
components:{ //注册组件
localTag,
}
})
</script>
</html>
其效果为:
组件传值(父传子):
父传子:
1、子组件可以通过props自定义组件属性(采用反射机制,需要填写的字符串,但是使用时可以直接作为变量)。
2、子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,将可以将变量值传递给子组件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body, h2 {
margin: 0;
}
.wrap {
880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
}
.box img {
200px;
height: 240px;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="warp">
<local-tag v-for="dog in dogs" :dog="dog" def="父传子的对象..." :xyz="dog.name"></local-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let dogs=[
{
name:'二哈一号',
img:'img/100.jpg',
}, {
name:'二哈二号',
img:'img/200.jpg',
}, {
name:'二哈三号',
img:'img/300.jpg',
}, {
name:'二哈四号',
img:'img/400.jpg',
},
];
let localTag={// 1)子组件可以通过props自定义组件属性(采用反射机制,需要填写字符串,但是使用时可以直接作为变量)
// 2)子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,将可以将变量值传递给子组件
props:['dog','def','xyz'],
template:`
<div class="box" @click="fn">
<img :src="dog.img" alt="">
<h2>打了{{dog.name}}{{count}}下</h2>
</div>
`,
data(){
return{
count:0,
}
},
methods:{
fn(){
console.log(this.dog);
this.count++;
}
}
};
new Vue({
el:'#app',
data:{
dogs,
},
components:{
localTag,
}
});
</script>
</html>
组件传值(子传父)
自定义事件是属于子组件的,子组件在父组件中渲染并绑定事件方法,所以事件方法由父组件实现;子组件如何触发自定义事件:this。$emit(‘自定义事件名’,触发事件回调的参数们)。
子组件触发自定义事件,携带出子组件的内容,在父组件中实现自定义事件的方法,拿到组件传递给父组件的消息。
下面看下代码,更好理解:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1>{{h1}}</h1>
<h3>{{h3}}</h3>
<tag @action="actionFn"></tag>
<hr>
<tag2 @h1a="aFn1" @h3a="aFn3"></tag2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let tag={
template:`
<div>
<input type="text" v-model="t1">
<input type="text" v-model="t2">
<button @click="changeTitle">修改标题</button>
</div>
`,
data(){
return{
t1:'',
t2:'',
}
},
methods:{
changeTitle(){
if (this.t1 && this.t2) {
//这里对父传值会使用一个非常重要的$emit,
this.$emit('action',this.t1,this.t2);
//传完值后将输入框中的值设置被空
this.t1='';
this.t2='';
}
},
}
};
let tag2 = {
template: `
<div>
主标题内容:<input type="text" v-model="t1" @input="t1Fn">
子标题内容:<input type="text" v-model="t2">
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
t1Fn() { //这里是在input的框中绑定oninput来时时监听传值,与watch监听事件有异曲同工之效。
this.$emit('h1a', this.t1);
}
},
watch: { //这里使用的时时监听来时时传值,,watch是监听事件
t2 () {
this.$emit('h3a', this.t2);
}
}
};
new Vue({
el:'#app',
data:{
h1:'主标题',
h3:'子标题',
},
components:{
tag,
tag2
},
methods:{
actionFn(a,b,c){
this.h1 = a;
this.h3 = b;
},
aFn1(a) {
if (!a) {
this.h1 = '主标题';
return;
}
this.h1 = a;
},
aFn3(a) {
if (!a) {
this.h3 = '子标题';
return;
}
this.h3 = a;
},
}
})
</script>
</html>