vue.js(19)--vue中子组件调用父组件的方法

子组件是不能直接使用父组件中的方法的,需要进行事件绑定(v-on:自定义方法名="父组件方法名"),然后在子组件中再定义一个方法,使用this.$emit(‘自定义方法名‘)语句完成父组件中方法到子组件中的调用,最后直接调用子组件中定义的方法即可。

<div class="app">
        <mycom v-on:func="parentshow"></mycom>
        <!-- 通过v-on:绑定方法将父组件中的方法绑定到func,
            然后在子组件中定义一个方法(this.$emit(‘func‘))将func传递给子组件,
            这样子组件就可以通过自己的方法来调用父组件的方法 -->
    </div>
    <template id="cmp">
        <div>
            <a href="#" @click.prevent="show">快点我</a>
        </div>
    </template>
    <script>
        var vm = new Vue({
        el:‘.app‘,
        data:{
            msg:‘我是父组件的方法‘
        },
        methods:{
            parentshow(){
                alert(this.msg)
            }
        },
        components:{
            mycom:{
                template:‘#cmp‘,
                methods:{
                    show(){
                        this.$emit(‘func‘)//通过此方法在子组件建立方法来调用父组件中的方法
                    }
                }
            }
        }
    })
    </script>

原文地址:https://www.cnblogs.com/qiqisusu/p/11372950.html

时间: 2024-10-30 22:18:12

vue.js(19)--vue中子组件调用父组件的方法的相关文章

Vue 子组件调用父组件 $emit

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Vue 子组件调用父组件 $emit</title>    </head>    <body>        <div id="app">            <table border="2

React篇-子组件调用父组件方法

react 中子组件调用父组件的方法,通过props: 父组件: <div className="tabC01"> <FTab tabCon={'tabCon01'} note={()=>this.isNote()}/></div> 子组件: <span className="wh01" >股票持仓(前十)<img src={require("../../image/[email protecte

react ,父子调用子组件的方法与子组件调用父组件的方法

1.父组件调用子组件的方法给子组件的标签 定义一个属性,例如 ref="zizu" ------------- 父组件通过,this.refs.biaoji.dream('哈哈') //调用子组件的dream方法 2.子组件调用父组件的方法 2.1.首先父组件需要通过给子组件自定义属性,把方法传递给子组件.2.2.子组件通过this.props 接收父组件的方法,this.props.方法名称().这样就可以调用父组件的方法了 原文地址:https://www.cnblogs.com/

Vue子组件调用父组件的方法

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 复制代码 <template> <div> <child></child> </div> </template> <script> import child from '~/components/dam/child'; export default { components: { child }, methods: { fathe

vue--父组件向子组件传参--父组件定义v-bind:参数名--子组件接收props----子组件调用父组件的方法(子组件向父组件传参)父组件@事件名称--子组件接收this.$emit

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

微信小程序 子组件调用父组件方法

组件 js:  var value = 123; this.triggerEvent('callSomeFun', value) 父组件 wxml: <component bind:callSomeFun="onLoad"></component> 父组件 js : onLoad: function() { ... ... } 父组件调用子组件的方法 当父组件引用了子组件的时候,会遇到父组件执行子组件的方法 父组件中 wxml: <filter-cmp i

vue2.0:子组件调用父组件

main.js文件添加如下: new Vue({ router, render: h => h(App), data: { eventHub: new Vue() }}).$mount('#app'); 父组件: 监听事件: this.$root.eventHub.$on('cart.add', (target) => { this._drop(target); }); 子组件: 触发事件: this.$root.eventHub.$emit('cart.add', event.target)

Vue评论案例--数据存放本地---联系子组件调用父组件方法(子组件点击发表-调用父组件更新评论列表)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

VUE 父组件调用子组件弹窗

想搞一个新增编辑弹窗,和列表页面分开 先来一个父组件调用子组件弹窗的demo 父组件 <template> <div> <el-button @click="show">按钮</el-button> <!-- 新增编辑弹框子组件 --> <add-or-update :addOrUpdateVisible="addOrUpdateVisible" @changeShow="showAddOr