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>