vue에서 부모 구성 요소 단추를 누르면 하위 구성 요소의 이벤트를 터치합니다

나는 이 실례를 몇 단계로 나누어 해석했다.
1. 부모 구성 요소의button 요소가 클릭 이벤트를 연결합니다. 이 이벤트는 notify 방법을 가리킵니다.
2. 서브어셈블리에 ref="child"등록
3. 부모 구성 요소의 notify 방법은 처리할 때 $refs를 사용합니다.child에서 이벤트를 하위 구성 요소에 전달하는parentMsg 방법, 부모 구성 요소의 매개 변수 msg
4. 하위 구성 요소가 부모 구성 요소의 이벤트를 받은 후parentMsg 방법을 호출하여 받은 msg를 메시지 그룹에 넣습니다
상위 어셈블리

<template>
 <div id="app">
  <!-- -->
  <input v-model="msg" />
  <button v-on:click="notify"> </button>
  <!-- -->
  <popup ref="child"></popup>
 </div>
</template>
 <script>
import popup from "@/components/popup";
export default {
 name: "app",
 data: function () {
  return {
   msg: "",
  };
 },
 components: {
  popup,
 },
 methods: {
  notify: function () {
   if (this.msg.trim()) {
    this.$refs.child.parentMsg(this.msg);
   }
  },
 },
};
</script>
 <style>
#app {
 font-family: "Avenir", Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

서브어셈블리

<template>
 <div>
  <ul>
   <li v-for="item in messages"> ：{{ item }}</li>
  </ul>
 </div>
</template>
 <style>
body {
 background-color: #ffffff;
}
</style>
 <script>
export default {
 name: "popup",
 data: function () {
  return {
   messages: [],
  };
 },
 methods: {
  parentMsg: function (msg) {
   this.messages.push(msg);
  },
 },
};
</script>

vue에서 부모 구성 요소 클릭 단추를 누르면 하위 구성 요소를 터치하는 이벤트에 대한 상세한 설명입니다. 더 많은 vue 부모 구성 요소가 하위 구성 요소를 터치하는 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 보십시오. 앞으로 많은 응원 부탁드립니다!