组件的使用
比如说将搜索框作为一个可复用的组件
理论知识：
- 父组件可以使用 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>