vue에서 $emit 및 $on 상위-하위 형제 구성 요소의 작동에 대한 자세한 설명

이번에는 Vue에서 $emit 및 $on parent-child 및 Brother 컴포넌트의 작동에 대해 자세히 설명하겠습니다. Vue. 실제 사례를 살펴보겠습니다. 세 가지 주요 전송 방법이 있습니다.

1. 상위 구성 요소에서 하위 구성 요소로의 통신

2. 하위 구성 요소에서 상위 구성 요소로의 통신

3. 형제 구성 요소 간 통신

1. 상위 구성 요소 값 전달 하위 구성요소를 하위 구성요소로 , props

//父组件：parent.vue
<template>
  <p>
    <child :vals = "msg"></child>
  </p>
</template>
<script>
import child from "./child";
export default {
  data(){
    return {
      msg:"我是父组件的数据，将传给子组件"
    }
  },
  components:{
    child
  }
}
</script>
//子组件：child.vue
<template>
  <p>
    {{vals}}
  </p>
</template>
<script>
export default {
   props:{ //父组件传值 可以是一个数组，对象
    vals:{
      type:String,//类型为字符窜
     default:"123" //可以设置默认值
    }
  },
}
</script>

사용 2. 하위 구성요소에서 상위 구성요소로 통신

를 사용하여

이벤트를 트리거합니다 $emit(eventname,option) , 매개변수 1: 사용자 정의 이벤트 이름, 작성 방법 , 이벤트와 같이 소문자 또는 -로 연결된 이벤트 이름은 카멜 표기법(eventName)으로 작성할 수 없습니다.

하위 구성 요소는 값을 상위 구성 요소에 전달하고 $emit를 사용하여 하위 구성 요소에서 이벤트 값을 트리거할 수 있습니다. 전달합니다. 이벤트를 통해 부모 컴포넌트가 데이터를 받습니다.

그런데 여기서 질문이 있습니다.

1. 적극적으로 부모 컴포넌트에 데이터를 전달하는 것이 자식 컴포넌트인가요? 이를 수신합니다(하위 구성 요소의 작업이 값을 전달할 시기를 결정합니다)

2. 아니면 그것을 통해 이루어집니까? 상위 구성 요소는 하위 구성 요소가 값을 상위 구성 요소에 전달할 시기를 결정한 다음 이를 수신합니다(작업 상위 구성 요소에서 값을 전달할 시기를 결정합니다.)

두 가지 상황이 있습니다2.1: $meit 이벤트가 트리거됩니다. 하위 구성 요소 내부의 이벤트가 사용자 정의 이벤트 $emit

2.2를 트리거합니다. meit 이벤트가 트리거되면 상위 구성요소를 통해 하위 구성요소(ref)의 이벤트(ref)를 작동하여 $emit가 트리거될 수 있습니다. $emit 사용자 정의 이벤트가 상위 구성 요소 또는 하위 구성 요소에 의해 트리거되는지에 차이가 있습니다

첫 번째는 하위 구성 요소에서 클릭을 정의하는 것입니다. 이벤트를 클릭하여 사용자 정의 이벤트 $emit를 트리거한 다음 수신합니다.

두 번째 방법은 상위 구성 요소에서 첫 번째 클릭 이벤트를 사용하는 것입니다. 구성 요소의 참조를 통해 인스턴스 메서드를 가져와 이벤트를 직접 트리거한 다음 상위 구성 요소에서 구성 요소를 모니터링합니다. 3. 형제 구성 요소 간 통신

(1) 이벤트를 통해 형제 간 데이터 전송 (2) 각 형제가 동일한 이벤트 메커니즘을 공유할 수 있도록 새 Vue 인스턴스를 만듭니다. (핵심 포인트)

(3) 데이터 전송 당사자는 이벤트를 통해 $emit(메서드 이름, 전달된 데이터)를 트리거합니다.

(4) 데이터 수신측은 Mounted() 후크 함수(마운트된 인스턴스)에서 $on(메서드 이름, 콜백(수신 데이터)) 이벤트를 트리거합니다. 이때 콜백 함수에서는 이것이 변경되었습니다. 화살표 기능을 사용할 수 있습니다.

//父组件：parent.vue
<template>
  <p>
    <child v-on:childevent=&#39;wathChildEvent&#39;></child>
    <p>子组件的数据为：{{msg}}</p>
  </p>
</template>
<script>
import child from "./child";
export default {
  data(){
    return{
      msg:""
    }
  },
  components:{
    child
  },
  methods:{
    wathChildEvent:function(vals){//直接监听 又子组件触发的事件，参数为子组件的传来的数据
      console.log(vals);//结果：这是子组件的数据，将有子组件操作触发传给父组件
      this.msg = vlas;
    } 
  }
}
</script>
//子组件：child.vue
<template>
  <p>
    <input type="button" value="子组件触发" @click="target">
  </p>
</template>
<script>
export default {
  data(){
      return {
      texts:'这是子组件的数据，将有子组件操作触发传给父组件'
      }
  },
  methods:{
    target:function(){ //有子组件的事件触发 自定义事件childevent
      this.$emit('childevent',this.texts);//触发一个在子组件中声明的事件 childEvnet
    }
  },
}
</script>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Angular 6에서 사용량을 줄이는 단계에 대한 자세한 설명

jQuery를 통해 원활한 캐러셀과 왼쪽 및 오른쪽 클릭을 달성하기

위 내용은 vue에서 $emit 및 $on 상위-하위 형제 구성 요소의 작동에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!