自定义组件
自定义组件可以为我们在开发中提供很大的帮助，页面中重复的部分我们便可以通过自定义组件来完成，这样就实现了写一次代码便可以在多个页面同时使用的好处，不仅让其他页面的代码量大大减少了，还可以减轻我们的工作量，提高我们的效率，下面就来说说自定义组件的使用：
- 首先在项目的components文件夹下新建一个vue文件，名字随意起就可以，如果没有components文件夹可以自己创建一个，在这里再解释一下为什么非得放在components文件夹里，因为components本身就有部件的意思，当我们使用uni-app的第三方组件时，使用Hbuilder时也会默认下载到components文件夹下，所以我们的components文件夹就是一个专门放组件的文件夹，在我们建好vue文件以后，就可以开始定义我们的组件
<template>
<view class='page'>
<text>{{child}}</text>
<text>{{title}}</text>
</view>
</template>
<script>
export default{
data:function() {
return{
child:'这是子组件的值'
}
},
props:['title']
}
</script>
<style>
.page{
width: 100%;
height: 200rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
background-color: #007AFF;
}
</style>
- 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
- 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
这是子组件的样式：
- 下面我们在页面中引用自定义的组件，在page目录下新建index.vue文件（在其他的目录叫其他的名字也可以，但必须得是vue文件），引入组件的方法：
import child from '@/components/test.vue'
引入后要在components中注册组件
components: {
child
},
之后就可以在页面中使用了：
<template>
<view class='page'>
<child></child>
</view>
</template>
看一下页面效果：
跟刚刚子组件中定义的是一样的，为了让大家看得更清晰，把页面的所有代码也放上来了
<template>
<view class='page'>
<child></child>
</view>
</template>
<script>
import child from '@/components/test/test.vue'
export default {
components: {
child
},
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
</style>
- 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
- 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
父子组件的传值
父组件传值给子组件
刚刚在定义子组件的之后写了一条props的语句：
没错，就是通过props来完成父组件向子组件传值的，子组件中写在props中的变量是不会在子组件中显示的，只能通过父组件将数值传个在props中定义的变量，事实上，子组件中props定义的变量，在父组件中使用的时候就成了子组件的属性名，我们通过给属性名赋值就完成了给子组件传值了，下面来看一下是怎么使用的：
<template>
<view class='page'>
<child title='这是父组件传给子组件的值'></child>
</view>
</template>
在看一下效果：
这样就完成了父组件传值给子组件了。
子组件传值给父组件
子组件传值给父组件是通过在子组件中使用$emit（eventName，optionalPayload）来触发事件，eventName为在父组件中触发的事件名，optionalPayload为所要传的变量名，在父组件中使用v-on来监听子组件触发的事件，下面介绍一下如何使用：
在子组件中增加触发事件：
<template>
<view class='page'>
<text @click='onChild'>{{child}}</text>
<text>{{title}}</text>
</view>
</template>
在script标签下写触发后的方法：
methods:{
onChild:function(){
console.log('触发了子组件事件')
this.$emit('onFather',this.child)
}
}
在父组件中使用：
<template>
<view class='page'>
<child title='这是父组件传给子组件的值' @onFather='click'></child>
</view>
</template>
methods: {
click:function(e){
console.log(e)
}
}
写好后，点击“这是子组件的值”这句话就可以在控制台查看打印结果了：
这就说明我们已经成功将子组件的值传给父组件了。
总结
我所说的这些也只是自定义组件的最基础用法，在我们的实际项目中还会定义更多更复杂的组件，也希望大家通过这些自定义组件为自己的项目提供大大的帮助，另外，本人也是个小白，如果在文中有写错的地方欢迎指出。
|
