Vue中父子組件通信與事件觸發(fā)的深入講解

更新時間：2022年03月22日 11:32:10 作者：小阿妍

組件是Vue核心功能之一,合理的組件化,可以減少我們代碼的冗余,提高項目的可維護性,下面這篇文章主要給大家介紹了關(guān)于Vue中父子組件通信與事件觸發(fā)的相關(guān)資料,需要的朋友可以參考下

一、組件

子組件

<template>
  <div style="border:1px solid black;width:400px; height: 130px;">
    <h3>我是子組件</h3>
    <button>子組件將值傳遞給父組件</button>
    <div>子組件接收父組件的值:</div>
  </div>
</template>

父組件

<template>
 <div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
    <h3>我是父組件</h3>
    <div>子組件向父組件傳遞的值:</div>
    <Child></Child>
  </div>
</template>

<script>
import Child from './Child';
export default {
    components: {
        Child
    }
}
</script>

效果展示：

通過這張圖可以看出父子組件的結(jié)構(gòu)，下面我們來實習父子組件通信。

二、父子組件通信

父組件給子組件通信

實現(xiàn)思路：子組件通過 props 來接受父組件傳過來的值。

在父組件中，定義一個data變量，在子組件標簽中動態(tài)綁定這個值。

// Father.vue
<template>
 <div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
    <h3>我是父組件</h3>
    <div>子組件向父組件傳遞的值:{{ChildMsg}}</div>
    <Child :FatherMsg="data"></Child>
  </div>
</template>

<script>
import Child from './Child';
export default {
    data() {
        return {
            data: 'I am your father',
        }
    },
    components: {
        Child
    }
}
</script>

接著在子組件里通過 props 來接收，這樣子組件就接收到了父組件傳遞過來的值了。

// Child.vue
<template>
  <div style="border:1px solid black;width:400px; height: 130px;">
    <h3>我是子組件</h3>
    <button>子組件將值傳遞給父組件</button>
    <div>父組件向子組件傳遞的值:{{FatherMsg}}</div>
  </div>
</template> 

<script>
export default {
    data() {
        return {
            data: 'I am your children',
        }
    },
    props: ['FatherMsg']
}
</script>

可以看到，我們父組件向子組件通信已經(jīng)實現(xiàn)了，接下來就是子組件向父組件通信了，這個就要使用到 this.$emit 方法了。

子組件向父組件通信

實現(xiàn)思路：通過在子組件中使用 this.$emit 來觸發(fā)自定義事件并傳值，然后在父組件中監(jiān)聽該事件即可。

在子組件中給 button 按鈕添加 click 事件，來通過 this.$emit 自定義事件，并傳入一個參數(shù)：

<template>
  <div style="border:1px solid black;width:400px; height: 130px;">
    <h3>我是子組件</h3>
    <button @click="send">子組件將值傳遞給父組件</button>
    <div>父組件向子組件傳遞的值:{{FatherMsg}}</div>
  </div>
</template> 

<script>
export default {
    data() {
        return {
            data: 'I am your children',
        }
    },
    props: ['FatherMsg'],
    methods: {
      send() {
        this.$emit('ListenChild', this.data);
      }
    }
}
</script>

在父組件中的子組件標簽里，先在 data 里定義一個變量接收這個值，然后監(jiān)聽在子組件中自定義的事件，并接受這個參數(shù)賦值給定義的變量：

<template>
 <div style="border:1px solid red;padding:2rem;width:400px;margin:0 auto;">
    <h3>我是父組件</h3>
    <div>子組件向父組件傳遞的值:{{ChildMsg}}</div>
    <Child :FatherMsg="data" @ListenChild="ListenChild"></Child>
  </div>
</template>

<script>
import Child from './Child';
export default {
    data() {
        return {
            data: 'I am your father',
            ChildMsg: '',
        }
    },
    components: {
        Child
    },
    methods: {
        ListenChild(data) {
            console.log("子組件傳遞過來的值：" , data);
            this.ChildMsg = data;
        }
    }
}
</script>

點擊子組件中的“子組件將值傳遞給父組件”，就可看到如下效果：

三、父子組件事件觸發(fā)

父組件調(diào)用子組件中的事件方法

通過 ref 直接調(diào)用子組件的方法：

// Child.vue 
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">
    我是子組件
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            msg: '',
        }
    },
  methods: {
    childFun() {
      console.log('我是子組件的方法 childFun');
      this.msg = '我的方法被調(diào)用了'
    },
  },
};
</script>

在子組件標簽上添加 ref 屬性，然后在方法中通過 this.$refs 找到綁定 ref 的屬性調(diào)用該子組件內(nèi)的方法即可。

// Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto">
    我是父組件
    <Button @click="handleClick">點擊調(diào)用子組件方法</Button>
    <Child ref="child" />
  </div>
</template>    

<script>
import Child from './Child';

export default {
    components: {
        Child
    },
    methods: {
        handleClick() {
            this.$refs.child.childFun();
        },
    },
}
</script>

通過組件的 $emit、$on 方法：

// Child.vue 
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">
    我是子組件
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            msg: '',
        }
    },
  mounted() {
    this.$on('childFun', function() {
        console.log('我是子組件方法');
        this.msg = '我的方法被調(diào)用了'
    });
  }
};
</script>

在子組件中使用 $on 綁定一個方法，然后在父組件中通過 $emit 找到綁定 $on 上面的事件名即可，但是也需要 ref 的配合。

// Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto">
    我是父組件
    <Button @click="handleClick">點擊調(diào)用子組件方法</Button>
    <Child ref="child" />
  </div>
</template>    

<script>
import Child from './Child';

export default {
    components: {
        Child
    },
    methods: {
        handleClick() {
        	//子組件$on中的名字
            this.$refs.child.$emit("childFun")    
        },
    },
}
</script>

兩種實現(xiàn)方式效果一致。

調(diào)用方法前：

調(diào)用方法后：

子組件調(diào)用父組件中的事件方法

直接在子組件中通過 this.$parent 來調(diào)用父組件的方法

// Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
    我是父組件
    <Child></Child>
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script>
  import Child from './Child';
  export default {
      data() {
          return {
              msg: ''
          }
      },
    components: {
      Child
    },
    methods: {
      fatherMethod() {
        console.log('我的父組件中的方法');
        this.msg = '我的方法被子組件調(diào)用了';
      }
    }
  };
</script>

// Child.vue
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">
    我是子組件
    <button @click="childMethod">點擊調(diào)用父組件方法</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

在子組件里用 $emit 向父組件觸發(fā)一個事件，父組件監(jiān)聽這個事件（推薦使用）

// Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
    我是父組件
    <Child @fatherMethod="fatherMethod"></Child>
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script>
  import Child from './Child';
  export default {
      data() {
          return {
              msg: ''
          }
      },
    components: {
      Child
    },
    methods: {
      fatherMethod() {
        console.log('我的父組件中的方法');
        this.msg = '我的方法被子組件調(diào)用了';
      }
    }
  };
</script>

子組件可以使用 $emit 觸發(fā)父組件的自定義事件。

// Child.vue
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">
    我是子組件
    <button @click="childMethod">點擊調(diào)用父組件方法</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        // fatherMethod父組件方法
        this.$emit('fatherMethod'); 
      }
    }
  };
</script>

父組件把方法傳入子組件中，在子組件里直接調(diào)用這個方法：

// Father.vue
<template>
  <div style="border: 1px solid red; width: 200px; padding: 10px; margin: 0 auto" >
    我是父組件
    <Child :fatherMethod="fatherMethod"></Child>
    <div style="color: red"> {{ msg }} </div>
  </div>
</template>
<script>
  import Child from './Child';
  export default {
      data() {
          return {
              msg: ''
          }
      },
    components: {
      Child
    },
    methods: {
      fatherMethod() {
        console.log('我的父組件中的方法');
        this.msg = '我的方法被子組件調(diào)用了';
      }
    }
  };
</script>

父組件可以將事件綁定到子組件標簽上，子組件使用 props 接收父組件的事件。

// Child.vue
<template>
  <div style="border: 1px solid black; width: 150px; margin: 10px auto">
    我是子組件
    <button @click="childMethod">點擊調(diào)用父組件方法</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>

以上三種實現(xiàn)方式效果一致。

調(diào)用方法前：