VUE问题：父组件与子组件之间的传值

1.父组件给子组件传值

子组件通过props来接收父组件传来的值。

例如：父页面中传name给子组件

//父页面
<view class="content">
		
		<view class="text-area">
			<leftview :dataname="name"></leftview>
		</view>
		
	</view>

//子页面
<template>
	<view @click="getname()">
		我是一个{{dataname}}组件
	</view>
</template>

<script>
	export default {
		name:"leftview",
		props: {
			dataname:{
				type:String,
				default:'-1',
			},
		},
		data() {
			return {
				
			};
		},
		
	}
</script>

<style>

</style>

子组件定义了props后，接收对应的参数即可。

2.子组件给父组件传值

通过$emit方法进行

//子页面
<template>
	<view @click="getname()">
		我是一个{{dataname}}组件
	</view>
</template>

<script>
	export default {
		name:"leftview",
		props: {
			dataname:{
				type:String,
				default:'-1',
			},
		},
		data() {
			return {
				
			};
		},
		
		methods:{
			getname(){
                //这里点击按钮后，对父页面进行传值
				this.$emit('update', 'New value from child')
			}
		}
	}
</script>

<style>

</style>

//父页面
<template>
	<view class="content">
		

		<view class="text-area">
             //这里绑定update方法进行接收子组件传来的值
			<leftview :dataname="name" v-on:update="handleUpdate"></leftview>
			
		</view>
		
	</view>
</template>

<script>
	import leftview from "@/components/leftview.vue"
	
	export default {
		components: {
			leftview,
		
		},
		data() {
			return {
				title: 'Hello',
				name: '00000',
				myitemname: "我是itemname",
			}
		},
		onLoad() {
			var that = this;
			setTimeout(function() {
				console.log("3s后执行")
				that.name = "chenghao"
				that.myitemname = "我是新的itemname"
			}, 3000)
		},
		methods: {
			updatename(index) {
				console.log(index)
				this.name = index;
			},
			handleUpdate(value) {
				console.log(value) // 输出：New value from child
			},
			gethandleUpdate(value){
				console.log("获取数据："+value)
			}
			
		},
		
	}
</script>

完工！