vue2实现父子组件传值

vue2实现父子组件传值

<在Vue 2中，父子组件之间的通信有多种方式，其中最常用的包括通过props传递数据（从父到子）和通过自定义事件（从子到父）。下面我将分别介绍这两种方法。

通过Props传递数据（从父到子）

在Vue 2中，你可以通过props将数据从父组件传递到子组件。

父组件可以将在方法中变化的变量传递给子组件
父组件（ParentComponent.vue）

<template>
  <div>
    <ChildComponent :message="parentMessage" :topData = "topData" />
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent',
      topData: "",
    };
  },
  methods: {
		changeTopData(){
			this.TopData = new_data
		}
	}
}
</script>

子组件需要相应方法实现上级传输数据与本地数据的绑定，并监听上级传输数据的变化
子组件（ChildComponent.vue）

<template>
  <div>
    <p>{{ message }}</p>
    <input v-model="localData"></input>
  </div>
</template>
 
<script>
export default {
  //props: ['message']
  props: {
	message: {
		type: String,
		default: "",
	},
	topData: {
		tyep: String,
		default: "",
	}
},
data(): {
	return: {
		localData: "",
	}
 },
//实现上级传入数据复制给本地数据
mounted() {
this.localData = this.topData
} ,
//监听数据变化
watch: {
topData(val) {
		this.localData = val
		}
	}
}
</script>

通过自定义事件传递数据（从子到父）

在Vue 2中，你可以通过自定义事件将数据从子组件传递到父组件。

父组件（ParentComponent.vue）

<template>
  <div>
    <ChildComponent @child-event="handleChildEvent" />
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(data) {
      console.log('Received from child:', data);
    }
  }
}
</script>

子组件（ChildComponent.vue）

<template>
  <div>
    <button @click="sendToParent">Send to Parent</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    sendToParent() {
      this.$emit('child-event', 'Hello from child');
    }
  }
}
</script>

使用.sync修饰符（父子双向绑定）

在Vue 2中，你可以使用.sync修饰符来实现父子组件之间的双向绑定。这种方法主要用于更新父组件中的数据。注意，.sync修饰符实际上是v-bind和v-on的语法糖。它背后使用的是事件来更新父组件的数据。但需要注意的是，.sync修饰符在Vue 3中已经被移除，推荐使用v-model配合事件来实现类似功能。在Vue 2中，你可以这样做：

父组件（ParentComponent.vue）使用.sync修饰符：

<template>
  <div>
    <ChildComponent :message.sync="parentMessage" /> <!-- 使用 .sync -->
  </div>
</template>

在子组件中，你需要触发一个更新事件来更新父组件的数据：

this.$emit('update:message', newValue); // 在Vue 2中，这种方式等同于Vue 3的