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>

  

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