子组件向父组件传值_cocos 3.72 点击事件的传值-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaojuju0/article/details/130103560

文章详细介绍了在Vue.js中三种不同的父子组件通信方式：1)使用v-model进行双向数据绑定；2)通过.sync修饰符实现属性的双向绑定；3)利用自定义事件传递值。这些方法在构建复杂应用时对于数据流的管理至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.双向绑定法v-model

父组件

<navBar :navData='navData' v-model='navData.mtop'></navBar>

import navBar from '@/components/navBar.vue';
export default {
		components:{
			navBar,
		},
		data() {
			return {
				navData:{
					navTitle: '测评', //标题
					mtop:'',//顶部导航栏的高度
				}
			}
		},
	}

子组件

export default {
		props:["navData"],
		data() {
			return {
				mtop:888
			}
		},
		created() {
			this.$emit('input',this.mtop)
		},
	}

2.双向绑定法.sync修饰符

父组件

<test :name.sync="username"></test>

import test from '@/components/test.vue';
export default {
		components:{
			test,
		},
		data() {
			return {
				username:'张山',
			}
		},
	}

子组件

<view class="">{{name}}</view>

export default {
		props:{
		   name:{
		     type:String
			}
		},
		data() {
			return {
			data:'帆帆帆帆'
			}
		},
		created() {
			this.$emit('update:name',this.data)
		},
	}

3.点击事件传值

父组件

<test @close-callback-fresh="closeFresh"></test>

// 接收值
closeFresh: function(e) {
   console.log(e)
 },

子组件

<view @click="dianji">点击</view>

dianji() {
	this.$emit('close-callback-fresh', '666')
},