## 一、项目目录下创建文件夹components
## 二、在components下右键创建vue组件
## 三、创建成功组件后可以有两种方式的引入
1、全局引入
2、局部的引入与使用
```
<template>
<view class="content">
<Child></Child>
</view>
</template>
<script>
import Child from "@/components/child.vue"
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
},
components:{
Child
}
}
</script>
```
## 四、父组件和子组件传递信息
1、父组件
```
<template>
<view class="content">
<Child msg="我是父组件定义的信息"></Child>
</view>
</template>
<script>
import Child from "@/components/child.vue"
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
},
components:{
Child
}
}
</script>
```
2、子组件
```
<template>
<view>
我是组件
<view>{{msg}}</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
props:['msg']
}
</script>
<style scoped>
</style>
```
## 五、子组件和父组件通信
1、父组件
```
<template>
<view class="content">
<Child :msg="titles" @abc="hello"></Child>
</view>
</template>
<script>
import Child from "@/components/child.vue"
export default {
data() {
return {
titles:"父组件和子组件通信"
}
},
onLoad() {
},
methods: {
hello(){
this.titles="子组件和父组件通信"
}
},
components:{
Child
}
}
</script>
```
2、子组件
```
<template>
<view>
我是组件
<view>{{msg}}</view>
<view>
<button type="default" @click="cc">按钮</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
props:['msg'],
methods:{
cc(){
this.$emit('abc')
}
}
}
</script>
<style scoped>
</style>
```
## 六、子组件向父组件传递参数
1、父组件
```
<template>
<view class="content">
<Child :msg="titles" @abc="hello"></Child>
</view>
</template>
<script>
import Child from "@/components/child.vue"
export default {
data() {
return {
titles:"父组件和子组件通信"
}
},
onLoad() {
},
methods: {
hello(mm){
this.titles=mm
}
},
components:{
Child
}
}
</script>
```
2、子组件
```
<template>
<view>
我是组件
<view>{{msg}}</view>
<view>
<button type="default" @click="cc">按钮</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
props:['msg'],
methods:{
cc(){
this.$emit('abc','我是子组件通过事件向父组件传递的参数，替换掉父组件的内容')
}
}
}
</script>
```
## 七、全局组件通信
1、API
uni.$on()
实例：
a、首先定义一个事件方法
```
<template>
<view>
用户列表
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
uni.$on('getinfosss',()=>{
console.log('user组件中的全局事件被触发')
})
},
methods: {
}
}
</script>
```
注意：定义了一个事件方法后可以在任意一个地方去触发这个方法
b、触发全局方法
```
uni.$emit('getinfosss')
```
注意：通过方法触发
2、vuex全局状态管理
