Vue.js - スロットのコンテンツをプログラムで設定する

Question

コンポーネント内部からスロットのコンテンツを設定/上書きする方法はありますか？同様

テンプレート：

<div> 
    <slot></slot> 
</div> 

JS：私は動的にコンポーネントテンプレートにコンテンツをプッシュする私の要素にv-htmlを使用することができます知っているが、私はHTMLを意味するだけで、純粋なHTMLをしませ意味

export default { 
    ... 
    mounted() { 
     this.$slot.render("<button>OK</button>"); 
    } 
    ... 
} 

Vueディレクティブで同様に：

JS：

export default { 
    ... 
    mounted() { 
     this.$slot.default.render('<button @click="submit">OK</button>'); 
    }, 
    methods: { 
     submit() { 
      // Here I want to get :) 
     } 
    } 
    ... 
} 

は基本的に私はVueのは、（のようなinnerHTMLが好きで解析し、レンダリングし、ではない）私のコンポーネントの範囲内の特定の文字列をレンダリングし、私のコンポーネントに特定のスポット上で載せていきたいと思います。理由は、AJAX経由でサーバーから新しいコンテンツを取得するからです。

申し訳ありませんが、2日間のグーグル・グーグルではまだ頭がおかしくなりません。

ありがとうございます！

Answer 1

これはあなたの最高のチャンスだと思います。 ここでは、単純なプレースホルダ（v-cloak付き）を使用しています。

実行中にvue-routerを使用して新しく作成したコンポーネントを追加すると、router.addRoutesという結果が得られる場合がありますので、vue全体をインスタンス化するまで待つ必要はありません。

function componentFactory(slot) { 
 
    return new Promise((resolve, reject) => { 
 
    window.setTimeout(() => { // Asynchronous fetching 
 
     resolve({ // Return the actual component 
 
     template: `<div> 
 
      ${slot} 
 
      </div>`, 
 
     methods: { 
 
      submit() { 
 
      console.log('hello'); 
 
      } 
 
     } 
 
     }); 
 
    }, 1000); 
 
    }); 
 
} 
 

 
componentFactory('<button @click="submit">OK</button>') // Build the component 
 
    .then(component => { 
 
    new Vue({ // Instantiate vue 
 
     el: '#app', 
 
     components: { 
 
     builtComponent: component 
 
     } 
 
    }); 
 
    });

[v-cloak], .placeholder { 
 
\t display: none; 
 
} 
 

 
[v-cloak] + .placeholder { 
 
\t display: block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 

 
<div id='app' v-cloak> 
 
    <built-component></built-component> 
 
</div> 
 
<div class="placeholder"> 
 
    This is a placeholder, my vue app is loading... 
 
</div>

おそらく