vue -- 组件

什么是组件

组件是展复用的Vue实例，说白了就是一组可以重复使用的模板，跟JSTL的自定义标签、Thymeleaf的th:fragment等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:

定义与复用 – 定义一个名为 button-counter 的新组件，并复用

• 每复用用一次组件，就会有一个它的新实例被创建
• 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
  当组件的 data 选项不是函数而是直接直接提供一个对象，则会造成数据影响到其它所有实例

<div id="example-2">
    <!--复用-->
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
</div>

<!--1.导入vue,js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    // 定义一个名为 button-counter 的新组件
    Vue.component('button-counter', {
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })

    var example2 = new Vue({
        el: '#example-2',
    })
</script>

通过 Prop 向子组件传递数据

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。

我们可以使用 v-bind 来动态传递 prop。

<div id="example-2">
    <blog-post v-for="item in items" v-bind:id="item.id" v-bind:title="item.title">
    </blog-post>
</div>

<!--1.导入vue,js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    // 定义一个名为 button-counter 的新组件
    Vue.component('blog-post', {
        props:['id','title'],
        template: '<li>{{id}}--{{title}}<li></li>'
    })

    var example2 = new Vue({
        el: '#example-2',
        data:{
            items:[
                { id: 1, title: 'My journey with Vue' },
                { id: 2, title: 'Blogging with Vue' },
                { id: 3, title: 'Why Vue is so fun' }
            ]
        }
    })
</script>