Vue.js旅程(三)

Vue组件

我们在选择各类框架的时候,都希望框架简单易用。在Vue中向我们提供了组件功能,我们可以定义各种个性化的组件来实现目标。
接下来演示三种组件的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<account></account>//插入定义的组件
</div>
<!-- 写法3.0中对应的模板内容 -->
<template id='account'>
<a href="#">登录</a>
<a href="#">注册</a>
</template>
</body>
<script>
//写法1.0:
//首先我们需要定义组件
var account = Vue.extend({
template:'<a href="#">登录</a> <a href="#">注册</a>'
});
//然后在全局中注册组件
Vue.component('account',account);
//写法2.0:
//将定义组件和注册组件一步到位
Vue.component('account',{
template:'<a href="#">登录</a> <a href="#">注册</a>'
});
//写法3.0:
//不把template的内容写在js内
Vue.component('account',{
template:'#account',
})
new Vue({
el:'#app'
})
</script>
</html>

Okay,单单知道组件的写法是不够的,更重要的是应用的你的应用中去。
下面完成一个简单的单击显示信息的demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>click-demo</title>
</head>
<body>
<template id='account'>
<h3>通过单击事件显示组件内容:{{msg}}</h3>
<a href="#" @click='login'>登录</a>
<a href="#">注册</a>
</template>
<div id="app">
<account></account>
</div>
</body>
<script>
Vue.component('account',{
template:'#account',
data:function(){
return {
msg:'这是account组件中的msg内容'
}
},
//这里你应该发现和之前有很大的区别,之前我们在data中填写的是一个对象,但是在组件中data是一个方法,并且在这个方法中一定要return回一个对象。
methods:{
login:function(){
alert(this.msg);
}
}
})
new Vue({
el:'#app',
data:{
msg:'hello'
}
})
</script>
</html>

接下来我们再看看如何在组件中再注册子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<template id='account'>
<h3>组件内容</h3>
<a href="#">登录</a>
<a href="#">注册</a>
<login></login>
<register></register>
</template>
<div id="app">
<account></account>
</div>
</body>
<script>
Vue.component('account',{
template:'#account',
components:{
'login':{
template:'<h2>这是登录组件的内容</h2>'
},
'register':{
template:'<h2>这是注册组件的内容</h2>'
}
}
})
new Vue({
el:'#app',
})
</script>
</html>

但上面的demo有个明显的业务上的错误,登录组件和注册组件的内容怎么可以同时显示出来呢~~,所以下面我们来实现组件显示的切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<template id="account">
<h3>组件内容</h3>
<a href="#" @click="componentName='login'">登录</a>
<a href="#" @click="componentName='register'">注册/a>
<!-- 这里我们是通过利用component的is属性呢来进行动态显示组建的,其实就是通过子组件的名字来进行控制组件内容的显示 -->
<component :is='componentName'></component>
</template>
<div id="app">
<account></account>
</div>
</body>
<script>
Vue.component('account',{
template:'#account',
data:function(){
return{
componentName:'login'//这里默认显示login组件
}
},
components:{
'login':{
template:'<h3>登录组件内容</h3>'
},
'register':{
template:'<h3>注册组件内容</h3>'
}
}
})
new Vue({
el:'#app'
})
</script>
</html>

好实现了组件内容的切换,接下来我们在捣鼓捣鼓,父组件和子组件之间相互传值的操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<template id="account">
<h3>账户组件内容:</h3>
<a href="#" @click="componentName='login'">登录</a>
<a href="#" @click="componentName='register'">注册</a>
<register :tip="msg"></register>
</template>
<div id="app">
<account></account>
</div>
<script>
//3.0 写法3:
Vue.component('account',{
template:'#account' ,
data:function(){
return {
componentName:'login', //代表默认显示的是登录组件
msg:'账户管理'
}
},
components:{
//在account组件中定义和注册一个login的子组件
'login':{
template:'<h2>登录组件内容</h2>'
},
'register':{
template:'<h2>注册组件内容 --->tip={{tip}}</h2>',
props:['tip'] //定义接收父组件传入的tip值
}
}
});
new Vue({
el:'#app'
});
</script>
</body>
</html>

上面了解父组件向子组件传值,接下来看一下子组件向父组件传值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<template id="subcom">
<button @click='senData'>发送数据给父组件</button>
</template>
<div id="app">
<subcom v-on:send='getdata'></subcom>
</div>
</body>
<script>
new Vue({
el:"#app",
methods:{
getdata:function(data){
alert(data);
}
},
components:{
'subcom':{
template:'#subcom',
methods:{
sendData:function(){
//使用this.$emit()将数据传入父组件
this.$emit('send','helle');
}
}
}
}
})
</script>
</html>

通过组件我们可以完成一些小目标,但有时候我们需要获取dom对象,那么在Vue中如何通过Vue的方法来获取dom对象呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click='getdata'>获取dom对象</button>
<div v-el:mydiv>这是一个div对象</div>
</div>
<script>
new Vue({
el:'#app',
methods:{
getdata:function(){
console.log(this.$els.mydiv);
this.$els.mydiv.innerText = '我们来修改下通过Vue的方式获取到的对象的值';
}
}
})
</script>
</body>
</html>

但是通过$el不能够获取到组件对象,如果需要获取组件对象我们又该怎么做呢?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click='getdata'>获取组件对象</button>
<subcom v-ref:mycomp></subcom>
</div>
<script>
//首先我们定义一个组件
Vue.component({
template:'<h1>这是subcom组件</h1>',
data:function(){
return {
msg: 'hello'
}
}
})
new Vue({
el:'#app',
methods:{
getdata:function(){
//获取subcom这个组件对象
console.log(this.$refs.mycomp)
//获取组件内的数据
console.log(this.$refs.mycomp.$data.msg)
}
}
});
</script>
</body>
</html>

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. Vue组件