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>

  

 能力有限，水平一般，錯誤之處，歡迎指正，感謝關注和評論！