vue, 소품으로서의 방출 vs 통과 기능

vue, 소품으로서의 방출 vs 통과 기능

다른 컴포넌트에 Import된 버튼 컴포넌트가 있다고 칩시다.버튼을 클릭했을 때 발생하는 어떤 종류의 논리에도 아이 컴포넌트를 결합하지 않도록 하고 싶다.이 버튼 컴포넌트를 활용하는 다양한 컴포넌트에서 이 논리를 유지하고 싶습니다.

적어도 두 가지 방법이 있다고 생각합니다.

1. 자녀가 부모에게 이벤트를 내보내고 부모가 핸들러를 정의하도록 합니다.

2. 부모에서 핸들러를 정의하고 버튼 컴포넌트에 소품으로 전달합니다.

나는 리액트에서 후자를 하는 것에 익숙하다.이 상황에 대한 베스트 프랙티스가 vue에 있습니까?

Vue의 철학은 소품, 이벤트 업이다.첫 번째 옵션은 이벤트 자체가 부모에게 송신(업)된 후 처리되기 때문에 그에 더 가깝습니다.

또한 Vue SFC 내에서는 바인딩된 속성의 접두사를 이벤트 진행으로 설명하는 v-on(또는 @)으로 추가할 수 있습니다. v-bind(또는 :)는 이벤트에 대한 콜백이긴 하지만 이 속성은 프로펠러임을 의미합니다.

Vue.js 이벤트는 콜백이며 DOM 이벤트가 아닙니다.DOM 이벤트명이 아닌 커스텀명을 이벤트청취자에 추가하기 때문에 이를 확인할 수 있습니다.click,focus...)는 없습니다.event이 함수에 전달된 오브젝트.$event의 의론$emit불러.

이벤트

장점

• 라이브러리의 경우: 경량화를 유지하고 클라이언트는 메서드 사용에 대한 유연성을 높입니다.
• 유용한 Vue devtools 이벤트 로깅
• 글로벌 리스너 허용(this.$root.onVuex.js를 사용하면 이 기능을 향상시킬 수 있습니다.
• 구분 구문::소품이나@이벤트/이벤트

단점

• 덜 명확하고 디버깅이 어렵다(청취자가 없거나 이벤트 이름의 철자가 잘못된 경우 사일런트 실패)

소품

장점

• 보다 명시적이고 선언적이며 디폴트화, 필수화, 검증이 가능하여 디버깅이 용이함(TypeScript의 런타임 오류 또는 컴파일 오류)

단점

• 소품 검증도 포함시켜야 하기 때문에 체크할 필요가 없습니다.function()소품은 콜하기 전에 존재합니다(그러나 소품 검증을 사용하는 것은 어쨌든 좋은 방법입니다)..)

결론

이 접근법은 다른 어떤 것보다도 관습적이고 개인적인 선호인 것 같습니다만, Vue.js 문서가 이벤트 접근 방식을 선호하지 않았다면 모두가 기꺼이 소품만을 사용했을 것이라고 생각합니다.이것이 더 좋다고 생각합니다(명료하다고 생각합니다).

소품은 몇 가지 경우를 제외하고 이벤트가 수행하는 모든 작업을 수행할 수 있습니다(예:$root이벤트 리스닝 패턴 - Vuex.js가 이 기능을 대체하고 확장성을 위해 선호된다는 점에 유의하십시오.이러한 기능은 보다 명확하고 디버깅이 용이하며 체크하기 쉽습니다.

개요 : https://forum.vuejs.org/t/events-vs-callback-props/11451

한 지 안 된 에서 React는 왜 그런지 @event(또는 위의 답변과 같은) 표준이 되는 경우도 있습니다.어떤 컴포넌트가 어떤 컴포넌트인지 선언할 수는 없지만 어떤 컴포넌트가 어떤 컴포넌트인지 쉽게 알 수 있습니다.props전해지고 있습니다.이름을 잘 지으면 어떤 것이 실제로 콜백 이벤트인지 알 수 있습니다.

베스트 프랙티스

베스트 프랙티스는 옵션1 입니다.이 프랙티스가 사용되고 있는 것은, 공식 메뉴얼을 참조해 주세요.https://vuejs.org/v2/guide/components.html#Sending-Messages-to-Parents-with-Events

성능

이벤트 버스를 사용하거나 소품으로 전달할 때 실행할 함수에 대한 참조를 전달하기만 하면 성능 차이는 거의 없습니다.

옵션 번호 1을 사용하는 예

하시면 됩니다.this.$emit('eventName', dataToSend, ...)하고, 합니다.<my-component @eventName="yourHandler" />그러면 버튼마다 다른 로직을 사용할 수 있습니다.

https://jsfiddle.net/wkdL0xbc/ 를 실장하는 멀티 셀렉트 컴포넌트용 바이올린을 작성했습니다.

// HTML
<div id="app">
  <multi-choice :items="myItems" @selected="alert($event)"></multi-choice>
  <multi-choice :items="myItems" @selected="sayIsCool"></multi-choice>
</div>

// JavaScript
const multiChoice = {
    template: '<div class="multi-choice"><span v-for="item in items" @click="select(item)">{{ item }}</span></div>',
  props: ['items'],
  methods: {
    select(item) {
        this.$emit('selected', item);
    }
  }
};

new Vue({
  el: "#app",
  data() {
    return {
        myItems: [
        'Homer',
        'Marge',
        'Bart'
      ],
    }
  },
  components: {
    multiChoice: multiChoice
  },
  methods: {
    sayIsCool(item) {
        alert(item + ' is cool!')
    }
  }
})

'투명 포장지'를 찾으시는군요

Vue의 세관 이벤트는 네이티브 DOM 이벤트와는 다르게 작동합니다.따라서 이벤트에 .native 속성을 첨부해야 합니다.

그러나 이벤트가 하위 항목에서 발생하도록 하려면 반환되는 계산 속성과 리스너 개체를 정의합니다.그리고 이제 넌 안 할 것이다.

기본적으로 소품으로 정의되지 않은 속성은 뷰의 루트 요소에 추가됩니다.

따라서 inheritAttrs: false를 설정하고 $attrs를 자녀에게 바인드하면 자녀는 이러한 속성의 타겟이 됩니다.

이제 루트 컴포넌트가 무엇인지 생각할 필요가 없습니다.

Chris Fritz는 그의 7가지 비밀 패턴 토크에서 그들이 어떻게 작동하는지 잘 설명합니다.21시 44분경부터 https://youtu.be/7lpemgMhi0k?t=21m44s

언급URL : https://stackoverflow.com/questions/50532260/vue-emitting-vs-passing-function-as-props