uni-app组件传值

目录

一.父组件给子组件传值

父组件: elementFather.vue

子组件: element.vue

效果图 

 二.子组件给父组件传值

子组件: element.vue

父组件: elementFather.vue

效果图

三.兄弟组件之间传值

a.vue

b.vue

父组件:elementFather

效果图

---

一.父组件给子组件传值

1. 在父组件elementFather.vue里面定义了title:"father!"
2. 在子组件中通过props来接收
3. 子组件接收到父组件传递过来的值以后,可在页面显示

     注意:若在子组件中同时定义title则会发生冲突 

父组件: elementFather.vue

(使用了components里面定义的组件的页面,用了element.vue)

<template>
	<elementname :title = "title"></elementname>
</template>

<script>
	import element from '../../components/element.vue'
	export default {
		data() {
			return {
				title: "father!"
			}
		},
		components: {
			elementname: element
		},
		methods: {

		}
	}
</script>

<style>

</style>

子组件: element.vue

<template>
	<view>
        <view>父组件传递的数据:{{title}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                
			}
		},
        props:['title'],
		methods: {

		}
	}
</script>

<style>

</style>

效果图 

 二.子组件给父组件传值

1. 在子组件中通过$emit方法给父组件传值$emit('myEven',this.title) $emit('方法名字',参数名)
2. 在父组件中通过@myEven方法接收数据

子组件: element.vue

<template>
	<view>
		<button @click="giveFather">给父组件传值</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                title:"son!"
			}
		},
		methods: {
			giveFather(){
				console.log("给父组件传值")
				this.$emit('myEven',this.title)
			}
		}
	}
</script>

<style>

</style>

父组件: elementFather.vue

<template>
	<view>
		<view>子组件传递的数据:{{title}}</view>
		<elementname @myEven="gitTitle"></elementname>
	</view>
</template>

<script>
	import element from '../../components/element.vue'
	export default {
		data() {
			return {
				title:''
			}
		},
		components: {
			elementname: element
		},
		methods: {
			gitTitle(title) {
				console.log(title)
				this.title = title
			}
		}
	}
</script>

<style>

</style>

效果图

三.兄弟组件之间传值

1. 定义兄弟组件a和b
2. 通过uni.$on监听全局的自定义事件
3. 通过uni.$emit触发全局的自定义事件

a.vue

<template>
	<view>
		<view>a组件</view>
		<button size="mini" @click="addNum">修改b组件的数据</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods:{
			addNum(){
				uni.$emit('updateNum',10)
			}
		}
	}
</script>

<style>

</style>

b.vue

<template>
	<view>
		<view>b组件</view>
		<view>这是b组件的数据:{{num}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0
			};
		},
		created() {
			uni.$on('updateNum',(num)=>{
				this.num+=num
			})
		}
	}
</script>

<style>

</style>

父组件:elementFather

<template>
	<view>
		<text-a></text-a>
		<text-b></text-b>
	</view>
</template>

<script>
	import textA from '../../components/a.vue'
	import textB from '../../components/b.vue'
	export default {
		data() {
			return {

			}
		},
		components: {
			"text-a": textA,
			"text-b": textB
		},
		methods: {
		}
	}
</script>

<style>

</style>

效果图