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/