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
APP.vue
-------------------------------------------
<template>
<div>
<!-- 要使用header.vue -->
<header-vue></header-vue>
<!-- 要使用body.vue -->
<body-vue></body-vue>
<!-- 要使用footer.vue -->
<footer-vue></footer-vue>
</div>
</template>
---------------------------------------------
<script>
// 1:引入组件对象
import HeaderVue from './header.vue'; //声明 var HeaderVue
import BodyVue from './body.vue';
import FooterVue from './footer.vue';
//在options中声明依赖
export default {
data(){ //属性
return {
}
},
methods:{ //行为
},
components:{ //对象
// 名 : 组件对象
HeaderVue:HeaderVue, // 在vue中,大写字母也可以
BodyVue,
FooterVue
}
}
</script>

全局组件

(注册一次,大家都能随意使用)Vue.component('组件名',组件对象);

1
2
//用谁来注册全局组件 -Vue
Vue.component('ShowVue',ShowVue); //使用<show-vue></show-vue>

父传子组件

传递参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
父用子组件,父向子组件传递参数
<son-vue text="呵呵哈哈" text2="212121"></son-vue>
------------------------------------------------------
子组件接收参数放到页面中
<script>
export default {
data(){
return {
}
},
//向外接受的一些值 props:['text']
props:['text','text2']
}
</script>

子向父通信

同一个实例 new Vue

connect.js

1
2
3
import Vue from 'vue';
export default new Vue();

1:父组件先$on(‘事件名’,回调函数)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Connector.$on('call',(place) => { //默认是只要emit就触发 //place 是子组件向父组件传递的参数
//console.log(this.num);
//判断触发次数,手动关闭事件
if(this.num >2){
//手动关闭
Connector.$off('call');
}
this.num ++;
console.log('儿子打电话了,我要冲出去找他!',place);
});
//只接受1次
// Connector.$once('call',function(place){
// console.log('儿子打电话了,我要冲出去找他!',place);
// });

2:子组件$emit(‘事件名’,数据参数)

1
Connector.$emit('call','上海');

3:重要on还是emit 必须是同一个对象 Vue的实例

  • this组件(vueComponent)对象本身是继承于new Vue的
  • $once 只执行一次
  • $off 清除事件