Vue: UI 구성 요소에 대한 개선된 API, 전달 속성 및 이벤트에 대한 상용구 감소

흠, 그건 잘 모르겠지만 그런 구성 요소의 경우 JSX 또는 createElement 를 사용하여 소품을 퍼뜨릴 수 있다고 생각합니다.

https://github.com/doximity/vue-genome

우리에게 이것은 훌륭할 것입니다. 스타일 지정 및 ux 목적으로 모든 입력을 레이블로 래핑합니다. 대신 jsx로 드롭다운할 수 있다는 데 동의하지만 템플릿은 모두가 따라하기가 훨씬 쉽습니다.

@Austio , 불행히도 템플릿에 대한 spread 소품을 만드는 방법을 생각할 수 있습니까?

개인적으로 이 기능이 마음에 듭니다. 그러나 때때로 루트 요소에 대한 class 속성을 바인딩해야 하는 것처럼 v-bind 동작의 일관성을 깨는 것 같습니다.

따라서 다음과 같이 한 쌍의 지시문을 getter 및 setter로 사용하는 것은 어떻습니까?

구성 요소 내부에서 v-expose 앵커를 정의합니다.

<input v-expose="foo" />

그것을 사용할 때:

<the-component v-define:foo="{propA: '', propB: ''}"></the-component>

<!-- or maybe use v-bind for it directly -->
<the-component :foo="{propA: '', propB: ''}"></the-component>

@jkzing , 멋있어 보이지만 다시 기본 스프레드처럼 보이고 @keyup.enter.prevent="myAction" 어떻게 정의할 것인가와 같은 잠재적인 문제가 있습니다.

<the-component :foo="{'@keyup.enter.prevent': myAction}"></the-component> 만 할 수는 없습니다. 즉, 런타임에 enter 및 prevent 와 같은 모든 수정자를 유지해야 합니다(vue-template-compiler의 일부입니다). ATM)

@nickmessing

기본 스프레드처럼 보입니다.

우리가 그것에 대해 이야기하는 것은 템플릿 사용자를 위한 스프레드와 같은 것을 가져오는 것입니다.

<the-component :foo="{'@keyup.enter.prevent': myAction}"></the-component>

@ 는 v-on shortland이며 prop (v-bind)를 의미하지 않습니다.

@jkzing , 설명의 링크에는 v-on 바인딩도 많이 있습니다.

@nickmessing 음... v-on 바인딩은 이벤트 버블링과 같은 또 다른 주제 IMO입니다. 🤔

@jkzing , 그것은 v-expose afaik의 전체 개념이었습니다. 모든 속성을 구성 요소의 특정 요소로 "이동"하게 만드는 것입니다.

@nickmessing , 원래 제안에 대해 확신할 수 없지만 이벤트 리스너가 attribute 로 간주되어야 한다고 생각하지 않습니다.

@jkzing , 아마 아닐 수도 있지만, >9000개의 다른 소품을 가질 수 있는 <my-awesome-text-input /> 의 일반적인 예를 고려할 때, 당신은 그것들이 모두 <input /> 에 도달하기를 원합니다. 코드의.

저는 개인적으로 v-bind="$props" 하거나 필터링하여 적용하고 싶지 않은 소품을 제외할 수 있습니다. 이렇게 하면 입력에 여러 소품을 한 번에 적용할 수 있습니다. 실제로 v-expose는 입력과 같은 래퍼 구성 요소의 경우 모든 html 소품을 지정해야 하기 때문에 유용할 수 있습니다.

그래서 이거
https://github.com/almino/semantic-ui-vue2/blob/master/src/elements/Input.vue#L9
지팡이는 v-bind="$props" 또는 v-bind="filteredProps" 로 축소됩니다. 여기서 filterProps는 일부 계산된 속성일 수 있습니다.

@cristijora 우리도 v-bind="someProps" 있습니다. 이 솔루션의 문제는 과도한 속성이 HTML 속성으로 추가된다는 것입니다. v-bind= 가 구성 요소에서 허용하지 않는 모든 속성을 필터링할 수 있다면 좋을 것입니다. 동적 <component> 를 사용하면 계산된 속성에서 어떤 props를 필터링할지 모릅니다. 그것은 가능하지만 추출 options.props 사용할 lodash._pick .

이것이 디렉티브로 정말 가능합니까?

@posva , 나는 이것이 그 자체로 지시문으로 작동하지 않을 것이라고 생각하지만 내부적으로 확산 + 일부 이벤트 전파와 같은 작업을 수행하는 vue 템플릿 엔진의 일부가 될 수 있습니다.

@posva 사용자가 만든 지시문이 아니라고 생각하므로 잘못된 언어를 사용하고 있을 수 있습니다. 내가 의미하는 것은 단지 "특수한 속성"입니다.

@chrisvfritz API가 어떻게 사용되는지에 대한 생각이

나는 이것이 개념을 제공/주입하는 데 사용되는 것과 유사하다는 것을 알 수 있었습니다.

@Austio 질문을 이해하지 못할 수도 있지만 원래 게시물에서 API에 대한 몇 가지 생각을 제공합니다.

Hey Chris는 부모에서 노출될 수 있는 것을 선언한 다음 자식에서 사용하는 것과 유사한 것을 사용하는 것에 대한 추가 생각을 의미했습니다.

아, 알겠습니다. 그럴 필요가 있는지 잘 모르겠습니다. 정보는 이미 소품과 슬롯을 통해 전달될 수 있으며 부모의 개인 속성도 this.$parent 로 액세스할 수 있지만 이러한 패턴을 피하는 것이 가장 좋습니다.

@Austio 생각하고 있는 특정 사용 사례가 있습니까?

@chrisvfritz 렌더링 기능에서 어떻게 작동합니까?

다음과 같이 하는 것이 더 나을 것 같습니다.

• 루트 노드에 대한 속성의 자동 상속을 비활성화하는 옵션 제공
• 이러한 속성을 $attributes 로 노출하십시오. 예를 들어 (tbd로 명명)
• $props 이미 보여준 것처럼 v-bind를 사용하여 원하는 곳에 추가하십시오.

v-bind="$attributes"

JSX/렌더링 기능에서 실질적으로 동일하게 작동한다는 추가 이점이 있습니다.

@LinusBorg 나는 당신이 생각하는 방식을 좋아합니다. 😄 훨씬 더 직관적입니다.

참고로, 이 API가 있으면 Vue의 다음 주요 버전이 속성 자동 상속을 완전히 제거하여 구성 요소 간 통신이 양쪽에서 명시적으로 유지될 수 있다고 생각합니다.

이 동작을 평가절하하거나 제거하는 것이 가능합니다. 그렇습니다.

그것이 가치가 있다면 libs 등의 많은 구성 요소에 필요한 변경 사항을 결정하고 커뮤니티, 특히 UI 컬렉션 작성자와 논의해야 합니다.

제안된 기능에 대한 A: 이 정보는 context.data.attributes 를 통해 기능 구성 요소에서 이미 사용할 수 있으므로 이 기능은 기본적으로 인스턴스 구성 요소에 동일한 기능을 제공합니다.

네, 맞습니다. 내가 염두에 두고 있는 주요 목적은 UI 구성 요소 작성자(타사 및 내부 모두)를 위해 작업을 더 간단하게 만드는 것입니다. 현재 다음과 같은 것이 필요한 경우가 많이 있습니다.

<input
  v-bind:id="id"
  v-bind:accept="accept"
  v-bind:alt="alt"
  v-bind:autocomplete="autocomplete"
  v-bind:autofocus="autofocus"
  v-bind:checked="checked"
  v-bind:dirname="dirname"
  v-bind:disabled="disabled"
  v-bind:form="form"
  v-bind:formaction="formaction"
  v-bind:formenctype="formenctype"
  v-bind:formmethod="formmethod"
  v-bind:formnovalidate="formnovalidate"
  v-bind:formtarget="formtarget"
  v-bind:list="list"
  v-bind:max="max"
  v-bind:maxlength="maxlength"
  v-bind:min="min"
  v-bind:multiple="multiple"
  v-bind:name="name"
  v-bind:pattern="pattern"
  v-bind:placeholder="placeholder"
  v-bind:readonly="readonly"
  v-bind:required="required"
  v-bind:src="src"
  v-bind:step="step"
  v-bind:type="type"
  v-bind:value="value"
  v-on:keydown="emitKeyDown"
  v-on:keypress="emitKeyPress"
  v-on:keyup="emitKeyUp"
  v-on:mouseenter="emitMouseEnter"
  v-on:mouseover="emitMouseOver"
  v-on:mousemove="emitMouseMove"
  v-on:mousedown="emitMouseDown"
  v-on:mouseup="emitMouseUp"
  v-on:click="emitClick"
  v-on:dblclick="emitDoubleClick"
  v-on:wheel="emitWheel"
  v-on:mouseleave="emitMouseLeave"
  v-on:mouseout="emitMouseOut"
  v-on:pointerlockchange="emitPointerLockChange"
  v-on:pointerlockerror="emitPointerLockError"
  v-on:blur="emitBlur"
  v-on:change="emitChange($event.target.value)"
  v-on:contextmenu="emitContextMenu"
  v-on:focus="emitFocus"
  v-on:input="emitInput($event.target.value)"
  v-on:invalid="emitInvalid"
  v-on:reset="emitReset"
  v-on:search="emitSearch"
  v-on:select="emitSelect"
  v-on:submit="emitSubmit"
>

새로운 $attributes 속성은 다음과 같이 줄일 수 있습니다.

<input
  v-bind="$attributes"
  v-on:keydown="emitKeyDown"
  v-on:keypress="emitKeyPress"
  v-on:keyup="emitKeyUp"
  v-on:mouseenter="emitMouseEnter"
  v-on:mouseover="emitMouseOver"
  v-on:mousemove="emitMouseMove"
  v-on:mousedown="emitMouseDown"
  v-on:mouseup="emitMouseUp"
  v-on:click="emitClick"
  v-on:dblclick="emitDoubleClick"
  v-on:wheel="emitWheel"
  v-on:mouseleave="emitMouseLeave"
  v-on:mouseout="emitMouseOut"
  v-on:pointerlockchange="emitPointerLockChange"
  v-on:pointerlockerror="emitPointerLockError"
  v-on:blur="emitBlur"
  v-on:change="emitChange($event.target.value)"
  v-on:contextmenu="emitContextMenu"
  v-on:focus="emitFocus"
  v-on:input="emitInput($event.target.value)"
  v-on:invalid="emitInvalid"
  v-on:reset="emitReset"
  v-on:search="emitSearch"
  v-on:select="emitSelect"
  v-on:submit="emitSubmit"
>

그래도 이벤트를 노출할 수 있는 방법이 있으면 좋을 것 같습니다. 빈 v-on 지시문이 부모의 모든 이벤트 리스너를 이 요소로 전달할 수 있습니까?

<input
  v-bind="$attributes"
  v-on
>

또는 묶고 싶은 여러 문제가 있는 경우 v-expose 와 같은 것으로 돌아갈 수 있습니다.

<input v-expose>

이것은 특정 기능 요청이 아니라 UI 구성 요소의 구축을 단순화하는 방법에 대한 광범위한 논의로 바뀌었으므로 이 문제의 레이블을 다시 지정하겠습니다. 🙂

이 주제에 늦었지만 저도 몇 가지 생각이 있습니다.

v-bind 현재 솔루션 및 단점

우선, 저는 이미 v-bind="propObject" 기능(매우 강력함)을 사용하고 사랑합니다. 예를 들어 bootstrap-vue 에는 모든 곳(버튼, 탐색, 드롭다운 목록 등)에서 사용되는 내부 링크 구성 요소가 있습니다. 구성 요소는 기본 앵커가 되는 피벗 대 라우터 링크 기반 href 대 to 및 vm.$router 존재하므로 각각에 조건부로 전달할 속성이 상당히 많습니다. 이러한 구성 요소의.

우리의 해결책은 이러한 소품을 믹스인에 넣고 계산된 객체와 함께 v-bind="linkProps" 를 사용하는 것이었습니다. 이것은 훌륭하게 작동하지만 _링크 구성 요소를 사용하는 다른 모든 구성 요소에 해당 믹스인을 추가하는 것은 여전히 ​​많은 오버헤드입니다.

v-expose v-bind 사용 가능성

나는 개인적으로 v-expose 의 개념을 좋아하며 기본 슬롯 + 명명된 슬롯처럼 작동할 수 있으며 수정자를 사용하여 명명된 속성 슬롯에 액세스할 수 있습니다.

기본 속성 _"slot"_은 항상 구성 요소 자체에 속성을 전달하지만(변경 사항 없음), 다른 명명된 대상은 구성 요소에서 지정할 수 있습니다. 아마도 다음과 같을 것입니다.

<template>
  <my-component 
    <!-- Nothing new here -->
    v-bind="rootProps"
    <!-- This binds the `linkProps` object to the named attribute slot `link` -->
    v-bind.link="linkProps"
  />
</template>

MyComponent.vue :

<template>
  <div>
    <router-link v-expose="link" />
  </div>
</template>

이벤트 프록시

.native 가 놀랍도록 강력한 수정자라는 점을 제외하고는 여기에 추가할 내용이 많지 않습니다. 나를 위해 많은 문제를 해결했습니다. Vue 개발자에게는 거의 알려지지 않은 것 같습니다(개발자를 이 기능에 노출시켜 해결되는 많은 UI 라이브러리 문제를 봅니다). 나는 사이트에 더 많은 문서와 검색 지원을 추가하기 위해 웹사이트에 PR을 게시했으며 잠재적으로 Google 검색에 최적화되었습니다.

다른 문제에서 API 표면에 대한 논쟁에서 비롯된, 나는 v-expose 아이디어의 팬이 아님을 반복해야 합니다. 그것은 또 다른 "작동 방식"을 소개하고 특별한 것을 구현하지 않으면 JSX에서 작동하지 않습니다.

내가 React 사람들에 대해 존경하는 한 가지는 슬림한 API에 대한 헌신과 가능한 한 언어의 기능을 사용한다는 것입니다. 그런 점에서 속성에 대한 props에 대해 이미 가지고 있는 패턴을 재사용하는 것이 다른 추상화를 도입하는 것보다 훨씬 나은 것 같습니다.

<my-input
  type="file"
  mode="dropdown"
>

<template>
  <div>
    <input v-bind="$attributes">
    <dropdown v-bind="{ ...$props, $attributes.type }"/>
  </div>
</template

아, 지금 무슨 말씀을 하시는지 알겠습니다. 그리고 난 이거 좋아! 현재 사용 가능한가요? vm.$attributes 가 대신 추가됩니까?

귀하의 의견을 다시 읽으십시오. 지금 추적 중입니다 👍

예, $attributes 가 추가됩니다.

또한 다음과 같이 루트 요소에 속성을 적용하는 현재 기본 동작을 해제하는 옵션이 필요합니다.
```html

그러면 Vue 3.0의 기본 설정이 될 수 있습니다. 이렇게 하기로 결정하면 주요 변경 사항이 발생합니다.

@LinusBorg 사건의 측면을 다루는 것에 대한 당신의 생각은 무엇입니까? 동일한 전략을 따르기 위해 다음과 같은 $listeners 속성을 추가할 수도 있다고 가정했습니다.

{
  input: function () { /* ... */ },
  focus: function () { /* ... */ },
  // ...
}

그러면 v-on 는 v-bind 와 유사한 객체를 받아들일 수 있습니다. 그래서 우리는:

<input v-bind="$attributes" v-on="$listeners">

내가 예상하는 한 가지 문제는 input / change 이벤트와 관련하여 v-model 가 요소에 대해 작동하는 것과 구성요소에 대해 약간 다르게 작동하기 때문입니다. 나는 또한 우리가 $listeners 와 $nativeListeners 둘 다 원하는지 모르겠습니다. $listeners 를 사용할 수 있는 경우 .native 수정자가 더 이상 사용되지 않을 수 있습니다.

또한 applyComponentAttrsToRoot 옵션과 관련하여 exposeRootEl 가 좋은 이름일 수 있으며 false 로 설정하면 자동으로 적용된 속성과 .native 이벤트를 모두 비활성화할 수 있습니다. 전송?

Vue.config 를 통해 전체 응용 프로그램과 단일 구성 요소에 대해 이 기능을 비활성화할 수도 있습니다.

최근에 $listeners 에 대해 비슷한 생각을 했습니다.

context.data.listeners

그래서 우리는 $props , $attributes , $listeners 끝날 것입니다.

$attributes 사용한 것처럼 v-on="{...}" 개체 구문을 요청하는 #5578 도 있습니다.

하지만 .native 수정자에 대해서는 확신이 서지 않습니다. 구성 요소 이벤트와 기본 수신기 모두에서 이 작업을 수행하려면 API가 훨씬 더 복잡해지고 루트 요소에 적용된 기본 이벤트 수신기가 원하는 이벤트 버블링을 계속 잡아내므로 사용이 의심스럽습니다. 템플릿의 특정 요소에 할당해야 합니다.

일반적으로 저수준 구성 요소 라이브러리의 경우 템플릿이 작업하기 불편할 때 렌더링 기능이 선호되어야 한다고 말하고 싶습니다. 그러나 다음이 중요하다는 데 동의합니다.

1. "props에서 찾을 수 없는 바인딩을 루트 요소에 대한 속성으로 자동 적용"의 기본 동작 비활성화(관련 문제: 이것이 class 및 style 바인딩에도 영향을 미칩니까?)

2. 구성 요소의 외부 바인딩을 반드시 루트가 아닌 내부 요소에 "상속"하는 더 쉬운 방법을 노출합니다. 템플릿과 렌더 기능 간의 일관성을 유지하는 것이 이상적입니다.

ia kie like vue, 간단한 도구

v2.4에서 이것에 대한 PR은 훌륭하다고 말하고 싶습니다! 👍

릴리스 노트에서

이들을 결합하면 다음과 같은 구성 요소를 다음과 같이 단순화할 수 있습니다.

<div>
  <input v-bind="$attrs" v-on="$listeners">
</div>

좋은 것처럼 보이지만 사실이 아닙니다. 이러한 종류의 구성 요소는 v-model과 함께 작동하도록 설계되었으며 내가 아는 한 구성 요소를 래핑하는 v-model은 제대로 작동하지 않기 때문입니다. 예를 들어 래핑 구성 요소에서 입력으로 v-model을 전달하는 방법에 대한 예가 있습니까?
내가 찾은 가장 간단한 방법 :
https://jsfiddle.net/60xdxh0h/2/

템플릿과 함께 작동하는 기능적 구성 요소를 사용하면 더 간단할 수 있습니다.

이러한 종류의 구성 요소는 v-model과 함께 작동하도록 설계되었으며 구성 요소를 래핑하는 v-model이 제대로 작동하지 않는 것으로 알고 있습니다.

왜 그렇게 생각할까요? v-model은 prop 및 이벤트 리스너에 대한 구문 설탕이며 둘 다 $attr/$props에 있으므로 쉽게 전달할 수 있습니다.

자식 옵션에 대한 지식이 필요한 유일한 것은 자식이 model 기본값을 변경하는 경우뿐입니다. 사실입니다.

그러나 상황에 따라 읽을 수 있습니다.

물론 문법적인 설탕이지만 읽기에 혼란스러울 수 있습니다.

이들을 결합하면 다음과 같은 구성 요소를 다음과 같이 단순화할 수 있습니다.

실제로 https://github.com/almino/semantic-ui-vue2/blob/master/src/elements/Input.vue 예제를 기반으로 할 때 동일한 제어를 달성하기 위해 리스너를 직접 전달할 수 없습니다. (예: v-on:input="emitInput($event.target.value)" 을 사용해야 합니다)

어쨌든 이 PR은 가치가 있습니다. 수고하셨습니다!

@AlexandreBonaventure v-model 가 요소에서와 구성 요소에서 약간 다르게 작동하기 때문입니다. DOM 이벤트는 콜백에 이벤트 개체를 제공하는 반면 구성 요소 이벤트는 값을 직접 제공합니다. 결과는 v-model _does_ 작동하지만 바인딩된 값은 DOM의 이벤트 개체입니다. 😕

v-model 가 여기에서 작동하는 것이 바람직할 것이라는 말씀이 옳다고 생각하지만 해결하기에 가장 좋은 곳이 어디인지 잘 모르겠습니다. 몇 가지 아이디어:

열거할 수 없는 속성을 $listeners 추가할 수 있습니다(예: __$listeners__: true , v-on 가 v-on="$listeners" 사용을 감지하는 데 도움이 됩니다. 그런 다음 $listeners 객체가 v-on 전달되고 각 리스너는 다음과 같이 래핑될 수 있습니다.

function (event) {
  listener(event.target.value)
}

한 가지 단점은 이제 데이터를 버리고 있다는 것입니다. 예를 들어 누군가가 keyCode 에 액세스하려는 경우 운이 좋지 않습니다. 그러나 v-on 의 개체 구문에 수정자가 지원되는 경우 .native 자동 래핑 동작을 비활성화하여 이 문제를 해결할 수 있습니다.

@yyx990803 @LinusBorg 타당성에 대해 어떻게 생각하세요? 내가 놓치고 있는 엣지 케이스가 있습니까?

오, 당신은 rral의 v-model을 언급하고 있습니다. 양식 요소, 나는 구성 요소에 대해 생각했습니다.

이 PR이 있든 없든 어쨌든 소품에 그것을 사용할 수 없습니다. 그리고 고급 앱에서는 그것을 사용하는 것이 다소 드뭅니다(달성 가능하긴 하지만).

@LinusBorg 우리가 같은 페이지에 있는지 확인하고 싶습니다. 이 템플릿이 포함된 CustomInput 구성요소:

<div>
  <input v-bind="$attrs" v-on="$listeners">
<div>

아래 코드가 작동할 것으로 예상하지 않습니까?

<CustomInput v-model="myValue" />

나는 그것이 작동할 것이라고 예상했지만, 알렉산드르를 이해한 방식은 구성 요소가 아닌 요소의 v-모델을 참조하고 있었습니다. 이는 결국 변경 로컬 상태에서만 작동합니다.

@chrisvfritz 가 그의 후기 게시물에서 설명한 내용을 말하려고 했습니다. (내 모국어가 아닌 영어 죄송합니다 :))

@LinusBorg 최신 릴리스에서 이 작업을 수행할 때의 문제는 여전히 안티 패턴으로 간주되고 상태 변경에 대한 경고를 트리거한다는 것입니다.

value 속성이 문자열이 아닌 경우 위의 작업을 수행하는 것이 매우 유용합니다. 내 라이브러리에서 가져온 열거형을 선택 옵션의 값으로 사용하려는 콤보 구성 요소를 예로 들어 보겠습니다.

<template>
    <select class="combo" v-model="value" v-on="$listeners"> 
      <option v-for="(item, key) in items" :value="item">{{key}}</option>
    </select>
</template>

<script>
export default {
    props: {
        items: {
            type: Object,
            required: true
        },

        value: {}
    }
}
</script>

다음은 상위 항목에 대해 사용하는 목록 중 하나의 예입니다.

            execList: {
                "None": ACT_EXEC_TYPES.NONE,
                "Function": ACT_EXEC_TYPES.FUNCTION,
                "Code": ACT_EXEC_TYPES.CODE
            }

콤보 구성 요소를 사용하는 방법:

<combo :items="execList" v-model="selectedAction.execType"/>

나는 지금 2 일 동안이 작업을 수행하려고했지만 여전히 정말 좌절하고 있습니다. 문제는 $event.target.value 가 항상 문자열이고 :value 있어야 하는 것처럼 평가되지 않는다는 것입니다.

@LinusBorg @AlexandreBonaventure @RobertBColton 이 문제에 대한 향후 토론에 집중할 수 있는 문제를 방금