组件的局部注册

组件和组件名

在Vue实例中通过Vue.component({/.../})绑定的组件都自动成为全局组件，不管这个项目是否需要该组件，都会被加载，增大了开销。我们也可以选择将组件注册为局部组件，语法如下：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

注意components是复数，因为工程一般用到不止一个组件，另外，组件名的命名遵循kebab-case命名方法，即上面带有连字符的那种。也可以采用驼峰式命名（PascalCase）

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

使用驼峰式命名时，自定义组件可以同时使用两种命名方式进行引用，也就是说，下面两种HTML引用都是有效的。

<ComponentA></ComponentA>
<component-a></component-a>

但是请注意，驼峰式命名在非字符串的模板中（即用‘’或“”引起来）是无效的。纯英文的自定义组件也很有可能与已有的HTML元素冲突，所以想省事，用连字符就行了。

引入外部组件

组件的出现使得模块化变成了可能，结合ES2015的module，组件也可以单独写在一个文件里

/*post-area.vue*/
export default {
        props: ['post'],
        template:
            "<div class='blog-post'>" +
            "<h3>{{ post.title }}</h3>" +
            "<div v-html='post.content'></div>" +
            "</div>"
};

然后在我们页面的文件中，可以这么做

/*这里我们假设模块文件和js文件在同一目录下*/
import blogPost from './post-area.vue'
var vm1 = new Vue({
    el: '#postArea',
    data: {
        posts: [
            { id: 1, title: 'My journey with Vue' , content: '<div>123</div><p>4949494</p>'},
            { id: 2, title: 'Blogging with Vue' , content: '<img src=x onerror="javaScript:alert(1)>'},
            { id: 3, title: 'Why Vue is so fun' , content: '<textarea>1231231223123</textarea>'}
        ]
    },
    components: {
        'blog-posture': blogPost
    }
})

export指令用于将文件中可用的接口暴露给文件外部，import指令可以将文件中暴露的接口引入当前文件。有关ES2015 module的知识，可以查阅这里,本文不再详述。

效果达到了预期。

图片.png

结合Ajax，应该还可以有不同的需求，感兴趣的朋友可以试试。