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}

  • 相关阅读:
    四种nlogn排序算法代码
    HDU1421
    HDU1789
    HDU1978
    HDU2059
    HDU2089
    深入理解数组与指针的区别
    存储字节对齐问题
    h5新特性<data*>
    浏览器的标准模式和怪异模式
  • 原文地址:https://www.cnblogs.com/kzxiaotan/p/11675767.html
Copyright © 2011-2022 走看看