vuejsインスタンス - <script>タグの外側に<template>マークアップを付けることはできますか？

Question

は、私は私の.vueファイルに次のコードを持っている：

<template> 
    <p>hello search</p> 
</template> 

<script> 
import Vue from 'vue'; 
var vm = new Vue({ 
    el: '#js-quick-search' 
}) 
</script> 

を、私の.htmlの中で私は、Vueのインスタンスの要素

<div id="js-quick-search"></div> 

しかし、テンプレートの一部が完全に無視されています。スクリプトタグ内に追加することなくインスタンスにどのようにアタッチできますか？

<script> 
import Vue from 'vue'; 
var vm = new Vue({ 
    el: '#js-quick-search', 
    template: '<p>whatever</p>' 
}) 
</script> 

が、スクリプト内のハードコードテンプレートなし：

基本的に私はこのように同じことを達成したいです。

Answer 1

scriptタグ内のマークアップが間違っています。テンプレートを作成するには、そのように、scriptをエクスポートする必要があるだろう：

<template> 
    <div class="MyTemplate"> 
    Your template 
    </div> 
</template> 
<script> 
export default { 
    name: "MyTemplate" 
} 
</script> 

、テンプレートを使用するには、ちょうどそのようにそれを置くこと（import MyTemplate from './MyTemplate.vue'）をインポートして、コンポーネント（components: { MyTemplate }）に追加<myTemplate>）