vue子调父 $emit props及<slot>的综合使用

最新推荐文章于 2024-03-05 09:00:00 发布

Awen_liang1002

最新推荐文章于 2024-03-05 09:00:00 发布

阅读量1.8k

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_37615202/article/details/78184938

版权

本文通过一个示例介绍了Vue中父子组件如何通过props和$emit进行通信，以及<slot>的使用方法，包括普通插槽和Scoped Slots的概念，帮助理解Vue组件间的交互和内容分发。

摘要由CSDN通过智能技术生成

在实际的VUE项目中会遇到父子组件互相传递数据的实际应用，还有父子组件相互嵌套使用的应用，下面例子只是做的一个小demo方便自己理解记忆。

ps:App.vue 父组件

　 Hello.vue 子组件

<!--App.vue  :-->
<template>
　　<div id="app">
　　　　<hello @newNodeEvent="parentLisen" title="我是标题">
			我是插槽"    slot"里面的东西
		</hello>
　　</div>
</template>

<script>
    import hello from './components/Hello'
    export default {
        name: 'app',
        components: {
            hello
        },
        methods: {
            parentLisen(evtValue) {    
                //evtValue 是子组件传过来的值