Vue.js 组件：Props 作为对象不适用于 x-template

Question

为了简化 Vue 组件的标记，我尝试使用一个对象作为道具。当按照组件基础知识的代码示例中的描述定义组件的模板时，Vue.js一切正常。但是尝试将模板定义为 x 模板时，我收到一条错误消息，无法读取未定义的属性“标题”。这是代码：<div id="app">    <script type="text/x-template" id="post-template">        <div class="blog-post">          <h3>{{ post.title }}</h3>          <div v-html="post.content"></div>        </div>    </script>    <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post></div>const data = {    posts: [        {            title: "Hello World",            content: "Bar"        }    ]};let postComponent = {  props: ['post'],  template: 'post-template'}const vue = new Vue({    el: '#app',    components: {        'blog-post': postComponent    },    data() {        return data;    }});是否无法访问 a 中的对象属性，x-template或者我的代码有问题？

Answer 1

两件事情：

• 将 x-template 放在你的 app div 之外。vue要把div里面的内容全部替换掉，这样模板就丢失了

• postComponent应该template用一个选择器来引用，所以#post-template而不是post-template

这是它的工作演示：https ://jsfiddle.net/vzj5g2sn/