vue.js - 为什么 x-template 部分的位置对于 vue 模板处理数据很重要？

Question

我有一个 vue 应用程序和一个全局组件。两者都有数据属性。对于组件，我使用 x-template 方式将我的 html 代码放在一起。我遇到了一个奇怪的错误，即数据在组件中不可用，尽管当我没有访问组件中的数据时组件已正确呈现。

这是 HTML:

<h1>Hello</h1>
<div id='app'>
  <p>Here is the app: {{message}}</p>
  <my-component></my-component>

  <script type="text/x-template" id="template">
      <div>
          <p>This is the component: {{secondmsg}}</p>
      </div>
  </script>

</div>

这是 .ts 文件:

Vue.component('my-component',
    {
        template: '#template',
        data: function () {
            return {
                secondmsg: 'Works again!'
            }
        }
    });
    
var vm = new Vue({
    el: '#app',
    data: {
        message: "App works!"        
    }
});

这不起作用，它说

secondmsg is not defined

但是，如果你这样做，它是有效的

• 不要访问 secondmsg。然后，组件正确渲染。或者:
• 如果你不使用 x-template版本而是使用 inline-template对于组件。或者:
• 如果您将脚本部分移动到关闭 vue 应用程序的 div 下方

所以在尝试了很多之后，我找到了这些解决方法，但我真的很想知道如果您使用数据(或 Prop )属性，为什么在定义 x 模板的位置很重要。我没有在文档中找到任何提示。

注意:我使用带有部分 View 的 Razor Pages，这就是为什么在标准情况下 x 模板在 div 中呈现。

Here's a fiddle如果你不相信我，就去玩吧:-)

Answer 1

出现这个问题的原因如下:

1. Vue 尝试渲染 #app
2. Vue 从 html DOM 获取要渲染的模板
3. Vue 看到有一个 message 引用，这有效
4. Vue 看到有一个对 my-component 的组件引用，它把它添加到渲染栈中
5. Vue 看到对 secondmsg 的引用，然后失败

如果没有失败，它将继续渲染 my-component

正如您已经发现的那样，以下方法可以解决该问题:

• don't access secondmsg. Then, the component renders right. Or:
• if you don't use the x-template version but rather use inline-template for the component. Or:
• if you move the script section below the div closing the vue app