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>

  

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