VUE工作中组件传值(父传子 子传父)
1.父传子
1.1 子组件使用父组件的值data
xml
父组件
<template>
<div>
<h1>{{ messageFromParent }}</h1>
<ChildComponent :message="messageFromParent" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
messageFromParent: 'Hello from parent!'
};
}
};
</script>
xml
子组件
<template>
<div>
<p>{{ messageFromParent }}</p>
</div>
</template>
<script>
export default {
props: ['message'],
data() {
return {
messageFromParent: this.message
};
}
};
</script>
在这个例子中,父组件通过props属性将messageFromParent的值传递给子组件。子组件通过props接收这个值,并将其保存在messageFromParent中,然后可以在子组件的模板中使用它。
需要注意的是,子组件中的props属性声明和父组件中传递的属性名称必须一致。在这个例子中,父组件传递的是messageFromParent,而子组件中使用的是props: ['message'],这样它们就能正确地连接起来。
1.2 子组件使用父组件的方法 methods
xml
父组件
<template>
<div>
<button @click="callParentMethod">Call Parent Method</button>
<ChildComponent @customEvent="handleCustomEvent" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
callParentMethod() {
alert('Method in parent component called!');
},
handleCustomEvent() {
alert('Custom event received in parent component!');
}
}
};
</script>
xml
子组件
<template>
<div>
<button @click="callParentMethod">Call Parent Method from Child</button>
</div>
</template>
<script>
export default {
methods: {
callParentMethod() {
this.$emit('customEvent'); // 触发名为'customEvent'的自定义事件
}
}
};
在这个例子中,子组件通过$emit方法触发了一个名为customEvent的自定义事件。在父组件中,我们通过在子组件标签上使用@customEvent监听这个自定义事件,并在handleCustomEvent方法中执行相应的逻辑。这就实现了子组件调用父组件的方法的效果。
请注意,$emit的第一个参数是事件名称,可以根据需要命名。在这里,我们使用了customEvent,但你可以根据你的需求选择一个合适的名称。
2.子传父
2.1 父组件使用子组件的值data
xml
子组件
<template>
<div>
<p>{{ messageFromChild }}</p>
</div>
</template>
<script>
export default {
data() {
return {
messageFromChild: 'Hello from child!'
};
}
};
</script>
xml
父组件
<template>
<div>
<ChildComponent ref="childComponentRef" />
<button @click="getParentValue">Get Value from Child</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
getParentValue() {
const childComponentInstance = this.$refs.childComponentRef;
if (childComponentInstance) {
const messageFromChild = childComponentInstance.messageFromChild;
alert('Value from child component: ' + messageFromChild);
}
}
}
};
</script>
在这个例子中,父组件通过ref引用了子组件,并通过this.$refs.childComponentRef访问了子组件的实例。然后,通过childComponentInstance.messageFromChild获取了子组件中的messageFromChild值,从而在父组件中使用了子组件的值。
需要注意的是,使用ref时需要确保在子组件被挂载之后再去访问,否则可能得到undefined。上述例子中的按钮点击事件是一个简单的例子,实际应用中可能需要在适当的生命周期钩子或事件中访问子组件
2.2 父组件使用子组件的方法 methods
xml
子组件
<template>
<div>
<button @click="childMethod">Call Child Method</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
alert('Method in child component called!');
}
}
};
</script>
xml
父组件
<template>
<div>
<ChildComponent ref="childComponentRef" />
<button @click="callChildMethod">Call Child Method from Parent</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
callChildMethod() {
const childComponentInstance = this.$refs.childComponentRef;
if (childComponentInstance) {
childComponentInstance.childMethod(); // 调用子组件的方法
}
}
}
};
</script>
在这个例子中,父组件使用ref引用了子组件,然后通过this.$refs.childComponentRef获取了子组件的实例。接着,通过childComponentInstance.childMethod()调用了子组件的childMethod方法。确保在调用之前检查childComponentInstance是否存在,以避免潜在的错误。
这种方式适用于调用子组件中的任何公共方法。请注意,在实际应用中,确保在适当的生命周期钩子或事件中访问子组件,以避免在子组件还未挂载或准备好的情况下调用其方法。