uniapp组件的使用
组件的使用
比如说将搜索框作为一个可复用的组件
理论知识:
- 父组件可以使用 props 把数据传给子组件。
- 子组件可以使用 $emit 触发父组件的自定义事件。
例子:
1.子组件:在components中新建一个.vue文件(最好带文件夹)
<template>
<view class="search-wrap">
<u-search :placeholder="placeholder" :show-action="false" height="80" @input="handleInput"></u-search>
</view>
</template>
<script>
export default {
name: 'cm-search', //定义一个组件名
props: { //定义属性,便于修改组件中的变量值
placeholder: {
type: String, //placeholder的类型为字符串。
default: '搜索' //定义一个默认的属性,可以在使用的时候通过属性修改搜索框中的内容。
},
},
data() {
return {
};
},
methods: { //定义方法
handleInput(e) { //input时间触发handleInput方法
//debugger
this.$emit('input2', e) //子组件可以使用 $emit 触发父组件的自定义(input2)事件
}
}
}
</script>
<style lang="scss">
</style>
2.父组件:
<cm-search @input2="handleInput2"></cm-search>
<!-- 使用定义的子组件,子组件的input触发父组件的input2事件,然后就能调用handleInput2方法l -->
<script>
import CmSearch from '../../components/search/search.vue' //引入组件vue文件
export default {
components: {CmSearch}, //使用CmSearch组件
data() {
return {
};
},
methods:{
handleInput2(event){ //调用方法
console.log(event)
//debugger
}
}
}
</script>
代码成就万世基积沙镇海
梦想永在凌云意意气风发