컴포넌트 슬롯 내에서 계산된 속성을 사용할 수 있습니까?

컴포넌트 슬롯 내에서 계산된 속성을 사용할 수 있습니까?

최근에 컴포넌트 슬롯 내에서 계산 속성이나 데이터 속성을 사용할 수 없다는 것을 알게 되었습니다.컴포넌트에 computed가 정의되어 있는데 컴포넌트의 슬롯에서 사용할 수 없습니다.그것을 작동시킬 수 있는 방법이 있나요?

코드 예:

Vue.component('test-component', {
   template: '<div><slot></slot></div>',
   computed: {
      my_computed: function(){
         return 2+3; // not defined in slot
      }
    }
})
<div id="app">
     <test-component>
        <span v-text="my_computed"></span>
     </test-component>
</div>

라이브 예시를 참조해 주세요.https://jsfiddle.net/gu9jh4n0/1/

그러기 위해서는 범위 지정 슬롯을 사용할 수 있습니다.

이 예에서 컴포넌트는 다음과 같습니다.

Vue.component('test-component', {
  template: '<div><slot :computed="my_computed"></slot></div>',
  computed: {
    my_computed: function(){
        return 2+3; // not defined in slot
    }
  }
});

메인 템플릿은 슬롯의 스코프를 취득해, 계산한 것을 사용합니다.

<test-component>
  <span slot-scope="data" v-text="data.computed"></span>
</test-component>

실제 예

언급URL : https://stackoverflow.com/questions/48460022/can-i-use-computed-properties-within-components-slot