学习笔记 : Vue组件的定义及基本的使用方法
组件的出现,是为了拆分实例的代码量的,继而能够让我们以不同的组件来划分不同功能模块. 组件是可复用的Vue实例,所以它们与new Vue
接收相同的选项,例如 data、computed、watch、methods以及生命周期钩子等 ..
- 组件化 : 从代码逻辑的角度进行划分,保证每个功能模块的职能单一
- 模块化 : 从UI设计的角度进行划分,保证前端方便UI组件的重用
组件的注册
全局组件注册方式
方式一 : 使用Vue.extend
,及其简化模式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<div id="app">
<my-component></my-component>
<simple-my-component1></simple-my-component1>
<simple-my-component2></simple-my-component2>
</div>
<script>
//注册组件
var component = Vue.extend({
});
Vue.component('myComponent', component)
//简化模式1
Vue.component('simpleMyComponent1', Vue.extend({
}));
//简化模式2
Vue.component('simpleMyComponent2', {
});
var vm = new Vue({
el: '#app',
data: {}
});
</script>
方式二 : 将template
定义为独立标签,提高代码可读性1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<template id="myTemplate">
<h2>Stay hungray,Stay foolish</h2>
</template>
<div id="app">
<simple-my-component></simple-my-component>
</div>
<script>
//注册组件
Vue.component('simpleMyComponent', Vue.extend({
template: '#myTemplate'
}));
var vm = new Vue({
el: '#app',
data: {}
});
</script>
局部组件注册方式
方式一 : components
选项用于为组件注册从外部引入的组件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<template id="myTemplate">
<h2>this is my component</h2>
</template>
<div id="app">
<my-component></my-component>
</div>
<script>
var myComponent = {
template: '#myTemplate'
}
var vm = new Vue({
el: '#app',
components: {
myComponent
}
});
</script>
方式二1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21<div id="app">
<my-title1></my-title1>
<my-title2></my-title2>
</div>
<script>
let myTitle1 = {
name: 'myTitle',
}
let myTitle2 = {
name: 'myTitle2',
}
var vm = new Vue({
el: '#app',
components: {
myTitle1,
myTitle2
}
});
</script>
Prop
父组件在引用子组件的同时,可以通过属性绑定(v-bind)的形式把需要传递给子组件的数据,以属性绑定
的形式,传递到子组件内部,供子组件使用,示例程序如下 :1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<div id="app">
<son-component v-bind:parentmsg="msg"></son-component>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '这是父组件中的数据'
},
components: {
sonComponent: {
props: ['parentmsg'], //只读
}
}
});
</script>
自定义事件
父组件向子组件传递方法,使用的是事件绑定机制,示例程序如下 :1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<div id="app">
<my-component @func="show"></my-component>
</div>
<script>
var myComponent = {
template: '#myTemplate',
methods: {
getMethods() {
this.$emit('func', '你好,我是子组件!')
}
}
}
var vm = new Vue({
el: '#app',
methods: {
show(data) {
window.alert('这是父组件中的方法,子组件传递过来的数据为:' + data)
}
},
components: {
myComponent
}
});
</script>
动态组件
组件间的切换,方式一 : 使用if-else
,示例程序如下 :1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<div id="app">
<button @click="flag=true">登录</button>
<button @click="flag=false">注册</button>
<login v-if="flag"></login>
<regist v-else="flag"></regist>
</div>
<script>
Vue.component('login', {
});
Vue.component('regist', {
});
var vm = new Vue({
el: '#app',
data: {
flag: true
}
});
</script>
组件间的切换,方式二 : 使用component
元素,示例程序如下 :1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<div id="app">
<button @click="componentName='login'">登录</button>
<button @click="componentName='regist'">注册</button>
<button @click="componentName='logout'">注销</button>
<component :is="componentName"></component>
</div>
<script>
Vue.component('login', {
});
Vue.component('regist', {
});
Vue.component('logout', {
});
var vm = new Vue({
el: '#app',
data: {
componentName: 'login' //default
}
});
</script>