Vue JS 组件如何在 Twig x-template 文件中工作答案

【问题标题】：How the Vue JS component work in Twig x-template fileVue JS 组件如何在 Twig x-template 文件中工作
【发布时间】：2020-03-31 07:14:51
【问题描述】：

我已经苦苦挣扎了一周，试图了解 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>

【问题讨论】：

stackoverflow.com/a/49154700/6689747

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

这个设置怎么样？ 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,
  },
})

【讨论】：

【解决方案2】：

如果你正在初始化 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>

【讨论】：

还可以使用 JavaScript 调试控制台来捕获错误，例如模板中的一个根元素
谢谢我的朋友。干杯
我只是想记下这个，可能对某人有所帮助。记下“脚本”标签内的内容。它必须是包装内容的一个根元素。例如 - 它必须有一个“div”标签，将所有元素包装在“script”标签内。否则会出错。