zoukankan      html  css  js  c++  java
  • vue中子组件调用父组件的方法

    通过v-on 监听 和$emit触发来实现:

    1、在父组件中 通过v-on 监听 当前实例上的 自定义事件。

    2、在子组件 中 通过'$emit'触发 当前实例上的 自定义事件。

    示例:

    父组件:

        

    <template>
    	<div class="fatherPageWrap">
              <h1>这是父组件</h1>
              <!-- 引入子组件,v-on监听自定义事件 -->
              <emitChild v-on:emitMethods="fatherMethod"></emitChild>
    	</div>
    </template>
    <script type="text/javascript">
           import emitChild from '@/page/children/emitChild.vue';
    	export default{
    		data () {
    		    return {}
    		},
    		components : {
                        emitChild
    		},
    		methods : {
    		    fatherMethod(params){
                             alert(JSON.stringify(params));
                        }
    		}
    	}
    </script>

    子组件:
      
    <template>
    	<div class="childPageWrap">
                <h1>这是子组件</h1>
    	</div>
    </template>
    <script type="text/javascript">
    	export default{
    		data () {
    		   return {}
    		},
    		mounted () {
                        //通过 emit 触发
                        this.$emit('emitMethods',{"name" : 123});
    		}
    	}
    </script>

    结果:

    子组件 会调用 父组件的fatherMethod 方法,该并且会alert 传递过去的参数:{"name":123}

  • 相关阅读:
    jQuery火箭图标返回顶部代码
    质数和分解(完全背包)
    CodeForces
    FZU
    FZU
    Pets(匈牙利算法)
    Construct a Matrix (矩阵快速幂+构造)
    绝世好题(线性dp)
    String painter (区间dp)
    Funny Positive Sequence (思维+前缀)
  • 原文地址:https://www.cnblogs.com/kzxiaotan/p/11675767.html
Copyright © 2011-2022 走看看