vue 子調父this.$parent this.$emit區別

第一種方法是直接在子組件中通過this.$parent.event來調用父組件的方法

父組件

vue 里 this.$parent 作用 $parent在子組件中調用父組件的方法或獲得其數據 this.$parent 可以訪問到父組件上所有的 data(){ 里的數據信息和生命周期方法，methods里的方法 } 如 this.$parent.List = []; 表示訪問到父組件中data的數據list數組 區分 1、ref為子組件指定一個索引名稱，通過索引來操作子組件； 2、this.$parent 可以直接訪問該組件的父實例或組件； 3、父組件也可以通過this.$children 訪問它所有的子組件， $parent和$children 可以遞歸向上或向下無線訪問， 直到根實例或最內層的組件。

 

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('測試');
      }
    }
  };
</script>

子組件

<template>
  <div>
    <button @click="childMethod()">點擊</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

第二種方法是在子組件里用$emit向父組件觸發一個事件，父組件監聽這個事件就行了。（傳參）

父組件

作用
子組件可以使用 $emit 觸發父組件的自定義事件。 語法 vm.$emit( event, arg ) //觸發父級實例上的事件

對於vue.js中的this.emit的理解： 舉例 : this.emit(‘increment1’,”加參數”)； 其實它的作用就是觸發自定義函數。此外,可以子組件傳參數給父組件 綜述,即子組件調用父組件的方法並傳遞數據 具體應用如下

 

<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('測試');
      }
    }
  };
</script>

子組件

<template>
  <div>
    <button @click="childMethod()">點擊</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>

第三種是父組件把方法傳入子組件中，在子組件里直接調用這個方法

父組件

<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('測試');
      }
    }
  };
</script>

子組件

<template>
  <div>
    <button @click="childMethod()">點擊</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>