집 > 기사 > 웹 프론트엔드 > 부모-자식 및 형제 구성 요소와 통신하기 위해 vue에서 $emit 및 $on을 작동하는 방법

부모-자식 및 형제 구성 요소와 통신하기 위해 vue에서 $emit 및 $on을 작동하는 방법

php中世界最好的语言원래의: 2018-05-30 10:52:162060검색

이번에는 vue에서 $emit 및 $on parent-child 및 sibling 컴포넌트를 통신하는 방법을 보여드리겠습니다. vue에서 $emit 및 $on parent-son 및 sibling 컴포넌트를 실행할 때 주의사항은 무엇입니까? 실제 사례를 함께 살펴보겠습니다.

세 가지 주요 전송 방법이 있습니다.

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>

이 시점에서 Vue의 컴포넌트 통신 및 가치 전달은 기본적으로 해결할 수 있지만 크고 복잡한 프로젝트의 경우 Vuex 상태 관리를 사용하는 것이 더 적합하다고 권장합니다....

마스터하셨으리라 믿습니다. 이 기사의 사례를 읽은 후 방법 등 얼마나 흥미로울까요? PHP 중국어 웹사이트의 다른 관련 기사도 주목해 주세요!