Vue JS 組件如何在 Twig x-template 文件中工作

Question

我已經努力了一個星期，試圖了解 Vue 組件如何在帶有 x-template 的 Twig 文件中工作。

我已經對我的代碼進行了多次測試，但沒有任何運氣。

 new Vue ({ el: '#app', data: function () { return { fname: 'John', lname: 'Smith' } } }); new Vue ({ template: '#my-template', data: function () { return { fname: 'Paul', lname: 'Smith' } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script type="text/x-template" id="my-template"> <div>Hello world</div> <div>{{ fname }}</div> </script> <div id="app"> <h1>Test</h1> <my-template></my-template> </div>

Answer 1

如果你正在初始化 Vue 並且想在其中使用一個組件，你必須注冊它。 組件名稱和模板 ID 也是兩個不同的東西。

 Vue.component('my-template', { template: '#my-html-template', data: function() { return { fname: 'Paul', lname: 'Smith' } } }) new Vue({ el: '#app', data: function() { return { fname: 'John', lname: 'Smith' } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script type="text/x-template" id="my-html-template"> <div> <div>Hello world</div> <div>{{ fname }}</div> </div> </script> <div id="app"> <h1>Test</h1> <my-template></my-template> </div>

Answer 2

這個設置怎么樣？ https://codepen.io/fuleinist/pen/KKwdwdp

<script type="text/x-template" id="my-template">
<div>Hello world</div>
<div>{{ lname }}</div>
</script>


<div id="app">
  <my-template></my-template>
</div>

然后在你的js文件中

var myTemplate = Vue.component('my-template', {
 template: '#my-template',
 props: {
    fname: String,
    lname: String,
},
 data: function () { 
   return {
     fname: 'John',
     lname: 'Smith'
   }
 },
 });

new Vue({
  el: '#app',
  components: {
    myTemplate: myTemplate,
  },
})