uniapp 组件化

看效果：点击 list 跳转，点击按钮也跳转


index.vue代码：

<template>
	<view class="content">
		<list value="vuesssapp"  @onClick="fun2">
			<!--
				value要在 list.vue 的 props登记，然后就可以被 list.vue使用了
				不能在 list 里面直接写 @click
				点击组件 ，需要在list.vue的@click触发的事件再 this.$emit 返回给页面一个参数
				而不是在页面直接添加 @click 没有用的哦
			-->
			
		</list>
		<list value="dddd2" @click="fun2"></list>
		<!-- 注意：上面这个 @click是不起作用的，必须使用子组件
			emit的函数事件
			如第一个 list 所示
		 
		 -->
		 
		 
		<button @click="toPage2">点击跳转</button>
	</view>
	<!-- 
		总结：
		1.view -> div标签   容器组件
		2.text -> span标签  文字组件
		3.image -> img 图片组件
	 
	 
	 -->
	
	
	
</template>

<script>
	import list from '@/components/list.vue'
	export default {
		components:{
			list
		},
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			toPage2() {
				uni.navigateTo({
					url:"../page2/page2/page2"
				})
			},
			fun2() {
				console.log("hello")
				uni.navigateTo({
					url:"../page2/page2/page2"
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

这个是 list.vue

<template>
	<view class="list" @click="onClick" >
		<text>{{value}}</text>
	</view>
</template>

<script>
	export default {
		props:{
			value:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			 onClick() {
				 //emit 会将参数和 onClick事件名传给组件
				 console.log("子组件被点击了"+this.value)
				 //注意：emit必须最后写，因为是先触发组件的console
				 //然后再返回给页面 @onClick回调，一定要放最后，不然没用
				 this.$emit('onClick',this.value)
			 }
		}
	}
</script>

<style>
	.list{
		border: #007AFF;
	}

</style>