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>
posted @ 2020-11-25 20:37  侠客小飞  阅读(1545)  评论(0编辑  收藏  举报