Vue子父组件方法互调

讲干货，不啰嗦，大家在做vue开发过程中经常遇到父组件需要调用子组件方法或者子组件需要调用父组件的方法的情况，现做一下总结，希望对大家有所帮助。

 

父组件调用子组件方法：

1.设置子组件的ref，父组件通过this.$refs.xxx.method_name(data)调用子组件方法，data参数可选

父组件：

<template>
  <div>
　　<h1>我是父组件</h1>
    <child ref="childname"></child>
  </div>
</template>
<script>
  import child from '~/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(data) 
        this.$refs.childname.childMethod(data);
        console.log('调用子组件方法');
      }
    }
  };
</script>        

 子组件：

<template>
  <div>
    <h1>我是子组件</h1>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod(data) {
      　　console.log(‘我是子组件方法’)
      }
    }
  };
</script>

 

子组件调用父组件方法：

1.在子组件中通过this.$parent.event来调用父组件的方法，data参数可选

父组件：

<template>
  <div>    
    <h1>我是父组件</h1>
    <child></child>
  </div>
</template>
<script>
  import child from '~/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(data) {
        console.log('我是父组件方法');
      }
    }
  };
</script>

 子组件：

<template>
  <div>
    <h1>我是子组件</h1>
    <button @click="childMethod(data)">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod(data);
        console.log('调用父组件方法')
      }
    }
  };
</script>

2.在子组件里用$emit向父组件触发一个事件，父组件监听这个事件，data参数可选

父组件：

<template>
  <div>    
    <h1>我是父组件</h1>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(data) {
        console.log('我是父组件方法');
      }
    }
  };
</script>

子组件：

<template>
  <div>
    <h1>我是子组件</h1>
    <button @click="childMethod(data)">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod(data) {
       this.$emit('fatherMethod',data);
        console.log('调用父组件方法')
      }
    }
  };
</script>

 3.父组件通过props把方法传入子组件中，在子组件里直接调用这个方法，data参数可选

父组件：

<template>
  <div>    
    <h1>我是父组件</h1>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(data) {
        console.log('我是父组件方法');
      }
    }
  };
</script>

子组件：

<template>
  <div>
    <h1>我是子组件</h1>
    <button @click="childMethod(data)">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod(data) {
        if (this.fatherMethod) {
          this.fatherMethod(data);
　　　　　　console.log('调用父组件传递的方法')
        }   
      }
    }
  };
</script>

 

其他调用方法：

1.因为最终所有组件都会渲染成真实的Dom元素，所以可以通过js或jquery，获取Dom元素对象，通过模拟点击的方式触发元素绑定的方法，通过本地Cookie、localStorage或sessionStorage做参数缓存，实现值传递。此方法不限于子父组件，只要组件位于同一页面都可使用，但因为不符合vue规范，并非特殊情况不建议使用

组件A：

<template>
  <div>    
    <h1>我是组件A</h1>
    <button id='btn' @click='methodA()'>点我</button>
  </div>
</template>
<script>
  export default {
    methods: {
      methodA() {
　　　　　var parameter= localStorage.getItem('parameter'); 
        console.log('我是组件A方法');
      }
    }
  };
</script>

组件B：

<template>
  <div>    
    <h1>我是组件B</h1>
    <button @click='methodB(data)'>点我</button>
  </div>
</template>
<script>
  export default {
    methods: {
      methodB(data) {
　　  　　localStorage.setItem('parameter',data); 
       　$('#btn').click();//模拟按钮点击
       　console.log('模拟点击按钮，触发A组件方法');
      }
    }
  };
</script>

  

 能力有限，水平一般，错误之处，欢迎指正，感谢关注和评论！