uni-app组件定义使用以及父子组件传值

自定义组件

1、首先在components文件夹下新建一个vue文件，components是默认放置组建的目录。

<template>
	<view class="test">
		<text>{{child}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				child: '这是子组件的值'
			};
		},
		methods: {
			
		}
	}
</script>

2、在页面中引用自定义的组件，在page目录下首页index.vue文件中使用组件

• 引入组件：import test from '../../components/test.vue'
• 在components注册组件
• 在页面通过标签使用组件（标签名必须和引入的文件名一致）

<template>
	<view class="demo">
		<test></test>   <!--使用组件-->
	</view>
</template>

<script>
import test from '../../components/test.vue'  //引入组件
export default {
	// 注册组件
	components:{
		test
	},
	data(){
		return {
		}
	},
	methods: {
		
	}
}
</script>

父组件传值给子组件

通过 props 来完成父组件向子组件传值。
组件中 props 定义的变量，在父组件中使用时就是子组件的属性名，通过给属性名赋值就完成了向子组件传值。

组件 test.vue 中代码如下：

<template>
	<view class="test">
		<text>{{child}}</text>
		<text>{{msg}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				child: '这是子组件的值'
			};
		},
		props:["msg"],  //父组件向子组件传值
		methods: {
			
		}
	}
</script>

页面 index.vue 代码如下：

<template>
	<view class="demo">
		<test msg="这是父组件传给子组件的值"></test>  <!--属性名直接赋值完成给子组件传值-->
		<test :msg="title"></test>  <!--通过变量赋值完成给子组件传值-->
	</view>
</template>

<script>
import test from '../../components/test.vue' //引入组件
export default {
	// 注册组件
	components:{
		test
	},
	data(){
		return {
			title: '这是父组件传递给子组件的值'  
		}
	},
	methods: {
		
	}
}
</script>

子组件传值给父组件

子组件传值给父组件是通过在子组件中使用$emit（eventName，optionalPayload）来触发事件，eventName为在父组件中触发的事件名，optionalPayload为所要传的变量名，在父组件中使用v-on简写成@click来监听子组件触发的事件。

子组件 test.vue 中代码如下：

<template>
	<view class="test">
		<text @click="onChild">{{child}}</text> <!--增加触发事件-->
		<text>{{msg}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				child: '这是子组件的值'
			};
		},
		props:["msg"],
		methods: {
			// 触发事件后的方法
			onChild() {
				console.log('我是子组件')
				this.$emit('onFather',this.child) //(父组件中触发的事件名，要传的变量名)
			}
		}
	}
</script>

父组件index.vue中代码如下：

<template>
	<view class="demo">
		<test msg="这是父组件传给子组件的值" @onFather="Father"></test>   
	</view>
</template>

<script>
import test from '../../components/test.vue' //引入组件
export default {
	// 注册组件
	components:{
		test
	},
	data(){
		return {
		}
	},
	methods: {
		//接收子组件传来的值
		Father(e) {
			console.log(e)
		}
	}
}
</script>

这样当我们在页面中点击子组件绑定的事件就把值传给父组件啦