# mixins、高阶组件、无渲染组件的模式

# 无渲染组件

# 数据组件

数据组件只传递数据，让父组件渲染数据

const listData = {
     template: `
     <li v-for="item in links">
         <slot name="link" :link="item"> </slot>
     <li/>
     `,
     data(){
         return {
            links: [ { 
                href: 'http://...',
                title: 'First Link',
                bookmarked: true 
            }, { 
                href: 'http://...',
                title: 'Second Link', 
                bookmarked: false 
            }]
         } 
     }
}

// 使用
<ul>
    <list-data>
        <template #link="slotScope"> 
            <a :href="slotScope.link.href">
            内容 {{slotScope.link.title}} {{slotScope.link.href}} {{slotScope}}
            </a>
        </template>
    </list-data>

<ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# 事件组件

const listData1 = {
    template:`<div>
            <li v-for="item in links">
                <slot name="link" :link="item" :bookmark="bookmark"> </slot>
            <li/>
        </div>`,
    data(){
        return {
            links: [ { 
                href: 'http://...',
                title: 'First Link',
                bookmarked: true 
            }, { 
                href: 'http://...',
                title: 'Second Link', 
                bookmarked: false 
            }]
        } 
    },
    methods: {
        bookmark(link){
            link.bookmarked = !link.bookmarked
        }
    }
}

<ul>
    <list-data1>
        <template #link="{link, bookmark}"> 
            <a :href="link.href">
            内容 {{link.title}} {{link.href}} {{link}}
            </a>
            <button @click="bookmark(link)"> {{link.bookmarked ? '取消' :'订阅'}}</button>
        </template>
    </list-data1>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 数据和事件

# 高阶组件

← Vuex vue diff算法 →