vue组件

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织：

例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

通过 Vue.component 全局注册组件

Vue.component('my-component-name', {
  // ... options ...
  template:  
})

说明：

Vue.component：注册组件
my-component-name：自定义组件名
template：组件的模版

通过 Prop 向子组件传递数据

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop列表中：

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

一个 prop 被注册之后，你就可以像这样把数据作为一个自定义 attribute 传递进来：

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层：模版-->
<div id="app-4">
    <!--传递给组件中的值：props -->
    <allen v-for="item in items" v-bind:res="item"></allen>
</div>

<!-- 导入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //定义一个Vue组件component
    Vue.component("allen", {
        props: ['res'],
        template: '<li>{{res}}</li>'
    });

    var app4 = new Vue({
        el: '#app-4',
        data: {
            items: ["java","linux","c++"]
        }
    });
</script>

</body>
</html>