自定义组件
以简单的button为例:
1、组件实现
我们实现一个简单的按钮
<template>
<view提交
</view>
</template>
<script>
</script>
<style>
</style>
2、在页面使用组件
<template>
<view class="content">
<!-- 3、使用 -->
<commonbtn></commonbtn>
</view>
</template>
<script>
// 1、import
import commonbtn from '@/components/mine/common-btn.vue'
export default {
// 2、注册
components:{
commonbtn
},
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
</style>
3、页面传值给组件
以页面改变按钮组件的文本颜色为例:
<template>
<view :style="{color:color}">提交
</view>
</template>
<script>
export default{
// 1、props中定义一个color属性
props:{
color:{
type:String,
default:"#000"
}
}
}
</script>
<style>
</style>
<template>
<view class="content">
<!-- 3、设置color属性为蓝色 -->
<commonbtn color="blue"></commonbtn>
</view>
</template>
4、组件传值给页面
以组件响应点击事件把当前的文本颜色传给页面为例:
4.1 首先在组件中自定义事件
<template>
<view :style="{color:color}" @click="onClick">提交
</view>
</template>
<script>
export default{
// 1、props中定义一个color属性
props:{
color:{
type:String,
default:"#000"
}
},
methods:{
onClick(){
console.log("我被点击了")
// 自定义一个事件 在按钮被点击事页面调用 第一个参数为自定义的事件名 第二个参数为传的值
this.$emit('change',this.color)
}
}
}
</script>
<style>
</style>
4.2 页面接收事件
<template>
<view class="content">
<!-- 3、设置color属性为蓝色 -->
<commonbtn color="blue" @change="change"></commonbtn>
</view>
</template>
<script>
import commonbtn from '@/components/mine/common-btn.vue'
export default {
components:{
commonbtn
},
data() {
return {
}
},
onLoad() {
},
methods: {
change(e){
console.log(e)
}
}
}
</script>
<style>
</style>
运行结果:
5、文本由页面按需传入,使用slot插槽插入
<template>
<!-- 2、button的style标签设置颜色color为值color -->
<view :style="{color:color}" @click="onClick">
<slot></slot>
</view>
</template>
<script>
export default{
// 1、props中定义一个color属性
props:{
color:{
type:String,
default:"#000"
}
},
methods:{
onClick(){
console.log("我被点击了")
// 自定义一个事件 在按钮被点击事页面调用 第一个参数为自定义的事件名 第二个参数为传的值
this.$emit('change',this.color)
}
}
}
</script>
<style>
</style>