상위 슬롯의 재사용 가능한 구성 요소 액세스 하위 메서드

상위 슬롯의 재사용 가능한 구성 요소 액세스 하위 메서드

컴포넌트가 있다고 합니다.Reusable방법을 써서onClick데이터 프로포트를 설정합니다.이 컴포넌트를 재사용할 수 있도록 하고 슬롯을 사용하여 부품을 오버라이드하고 싶습니다.

내가 규범을 이해했으므로, 나는 반드시 합격해야 한다.onClick최대 범위 속성으로서의 메서드parent부터reusable:

<div class="reusable">
    <h2>Reusable</h2>
    <slot name="clicker" v-bind:onClick="onClick">
        Default stuff <button v-on:click="onClick">Close</button>
    </slot>
    <p v-if="clicked">You clicked me</p>
</div>

<div class="parent">
    <h1>Parent</h1>
    <reusable>
        <template slot="clicker" scope="reusable">
            <button click="reusable.onClick">
                Close from parent
            </button>
        </template>
    </reusable>
</div>

방법이 많으면 장황하고 시끄러워질지도 모릅니다.더 좋은 방법이 있을까?아니면 이게 완전 크롬인가?

레퍼런스를 사용하는 것과 부모 콜에 메서드를 사용하는 것을 검토했습니다.this.$refs.reusable.onClick동적 컴포넌트를 지정하고 교환할 수 있습니다.두 가지 모두 직관에 반하는 것 같습니다.

오브젝트 표기법을 사용하여 슬롯의 속성을 바인드할 수 있습니다.

<slot name="clicker" v-bind="{ onClick, onInput, onCustom }">
    Default stuff <button v-on:click="onClick">Close</button>
</slot>

여기 작동하는 바이올린이 있습니다.

---

또한 이 작업이 너무 상세해지면 오브젝트 정의를 데이터 속성으로 이동하여 템플릿에서 꺼낼 수 있습니다.

<slot name="clicker" v-bind="scopeProps">
    Default stuff <button v-on:click="onClick">Close</button>
</slot>

data() {
  return {
    scopeProps: {
      onClick: this.onClick,
      onInput: this.onInput,
      onCustom: this.onCustom
    }
  }
}

라고 하는 2개의 컴포넌트가 있다고 합시다.

재사용 가능vue:

<template>
  <div class="reusable">
      <h2>Reusable</h2>
      <slot name="clicker">
          Default stuff <button v-on:click="handleClick">Close</button>
      </slot>
      <p v-if="clicked">You clicked me</p>
  </div>
</template>

<script>
export default {
  params: {
    onClick: {
      type: Function,
      default() {}
    }
  }
  
  methods: {
    handleClick() {
      // default codes to execute goes here
      // then call onClick() callback
      this.onClick();
    }
  }
}
</script>

parent.vue

<template>
  <div class="parent">
      <h1>Parent</h1>
      <reusable :on-click="onClickHandler">
          <template slot="clicker">
              // other codes for injecting to slot
          </template>
      </reusable>
  </div>
</template>

<script>
import reusable from './path/to/reusable.vue';

export default {
  components: { reusable },
  
  methods: {
    onClickHandler() {
      // stuff to be run when button in 'reusable' got clicked
    }
  }
}
</script>

이것은 사용 사례에 대한 가능한 해결책 중 하나입니다.

언급URL : https://stackoverflow.com/questions/45192103/reusable-component-access-child-method-in-parent-slot