子组件调用父组件方法

最新推荐文章于 2024-11-30 10:30:05 发布

dingshi1882

最新推荐文章于 2024-11-30 10:30:05 发布

阅读量247

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/NExt-O/p/10859216.html

本文详细介绍了在Vue框架中，如何实现子组件通过自定义事件调用父组件的方法，包括定义子组件方法、绑定事件触发及父组件响应过程。通过具体代码示例，展示了Vue组件间通信的基本原理。

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

<body>

    <div id="app">
        <button>注册</button>
        <button>登录</button>
        <com @fun="funparent"></com>    //1.自定义方法: fun（在子组件调用），调用父组件方法：funparent
    </div>
    
    
    <template id="tem">
        <div>
            <button @click="e">注册页面{{ msgs }}</button>   // 3.绑定事件触发子组件的e方法
            <h1 >登录页面</h1>
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
       var vm = new Vue({
           el:'#app',
           methods:{                  
               funparent(x){    
                   console.log('这是一个父组件方法'+ x)
               }
           },
           components:{
               com:{
                   template:'#tem',
                   methods:{
                     e(){                                     //2.在子组件中定义一个e方法，e方法中使用this.$emit('方法名'，‘参数’)调用fun方法
                         this.$emit('fun','我在调用父组件方法');    
                     }
                   }
               }

           }
       })
    </script>
</body>

1.自定义方法: fun（在子组件调用），调用父组件方法：funparent

2.在子组件中定义一个e方法，e方法中使用this.$emit('方法名'，‘参数’)调用fun方法

3.绑定事件触发子组件的e方法

转载于:https://www.cnblogs.com/NExt-O/p/10859216.html