親スロットに再利用可能なコンポーネントアクセスの子メソッド

Question

私は、コンポーネントReusableと、データの小道具を設定するメソッドonClickを持っているとします。私はこのコンポーネントを再利用可能にしたい、そしてスロットを使って部品をオーバーライドしたい。私は方法の多くを持っている場合

<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> 

これは冗長で騒々しい得るかもしれない、と私は疑問に思いました。私はキヤノンを理解したよう

、私はreusableからparentにスコーププロパティとしてonClick方法を渡す必要があります：は良い方法です、またはこれは完全に腐っていますか？

私はrefsを使用して、親のメソッドthis.$refs.reusable.onClickを呼び出し、ダイナミックコンポーネントを指定してスワップアウトすることを検討しました。どちらも直観に反しているようです。

Answer 1

あなたがオブジェクトの表記法を使用してスロットのプロパティをバインドすることができます：

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

Here's a working fiddle.

---

そして、それはあなたが、少なくともデータプロパティにオブジェクト定義を移動することができ、あまりにも冗長であることを取得する場合テンプレートからそれを取り出します：

<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 
    } 
    } 
} 

Answer 2

たちはreusableとparentという名前の2つのコンポーネントを持っているとしましょう。

reusable.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>

これは、ユースケースの1つの可能な解決策です。