클릭 리스너 포함 Renderless Vue 구성 요소

클릭 리스너 포함 Renderless Vue 구성 요소

렌더리스 컴포넌트에 대한 자세한 내용은 이 투고를 읽어보았습니다.

https://adamwathan.me/renderless-components-in-vuejs/

렌더리스 컴포넌트는 거의 다음과 같습니다.

export default {
  render() {
    return this.$scopedSlots.default({})
  },
}

이제 이 렌더리스 컴포넌트를 사용하고 슬롯에 전달되는 모든 컴포넌트에 클릭 리스너를 추가합니다.

저 같은 경우에는 단추일 거예요.렌더리스 컴포넌트는 단순히 버튼을 랩하고 클릭청취자를 추가하면 AJAX 요청이 실행됩니다.

슬롯에 전달되는 요소에 클릭 리스너를 추가하려면 어떻게 해야 합니까?

렌더리스 컴포넌트 내에서 클릭 핸들러를 바인드하는 경우, 이 투고로부터 전달된vnode를 클론화할 필요가 있다고 생각합니다.renderless, 그 속성을 향상시키기 위해.

createElements 인수를 참조하십시오. 두 번째 arg는 확장할 개체입니다.

템플릿에서 사용하는 Atribute에 대응하는 데이터 객체.선택적.

console.clear()
Vue.component('renderless', {
  render(createElement) {
    var vNode = this.$scopedSlots.default()[0]
    var children  = vNode.children || vNode.text
    const clone = createElement(
      vNode.tag, 
      {
        ...vNode.data, 
        on: { click: () => alert('clicked') }
      },
      children
    )
    return clone
  },
});
new Vue({}).$mount('#app');

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

<div id="app">
  <renderless>
    <button type="button" slot-scope="{props}">Click me</button>
  </renderless>
</div>

한 가지 방법이 있습니다.

렌더리스 컴포넌트 래퍼는 1개의 컴포넌트로 구성됩니다.action(즉, AJAX 요청을 발행하는 기능) 프로포즈.

Vue.component('renderless-action-wrapper', {
  props: ['action'],
  render() {
    return this.$scopedSlots.default({
      action: this.action,
    });
  },
});

그런 다음 위의 래퍼를 사용하는 다른 컴포넌트는 커스터마이즈 가능한 슬롯을@click핸들러: 트리거되었을 때 전달되는 액션을 호출합니다.

Vue.component('clickable', {
  props: ['action'],
  template: `
    <renderless-action-wrapper :action="action">
      <span slot-scope="{ url, action }">
        <span @click="action()">
          <slot name="action"></slot>
        </span>
      </span>
    </renderless-action-wrapper>
  `,
});

마지막으로 전용 포장지를 배선합니다.

<clickable :action="doAjaxRequest">
  <button type="button" slot="action">Button</button>
</clickable>

다음은 여러분이 가지고 놀 수 있는 위의 제안의 실제 예입니다.

언급URL : https://stackoverflow.com/questions/52572740/renderless-vue-component-with-a-click-listener