1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<!-- NavigationLink 组件 -->
<a :href="url" class="nav-link">
 <slot name="icon" />
 <slot>默认链接</slot>
</a>
<!-- 使用 NavigationLink -->
<navigation-link url="/profile">
 <template #icon>
 <font-awesome-icon name="user" />
 </template>
 <span>用户信息</span>
</navigation-link>

 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
37
38
39
40
41
42
43
44
45
46

<!-- ContactList 组件 -->
<template>
 <div class="card">
 <div
 class="flex items-center spaced-y-6"
 v-for="contact in contacts"
 :key="contact.id"
 >
 <div>
 <div class="font-bold">
 <!-- render-props -->
 {{ pseudoSlot({ contact }) }}
 </div>
 <div class="font-bold">
 <!-- scoped-slots -->
 <slot :item="contact" />
 </div>
 </div>
 </div>
 </div>
</template>
<script>
 export default {
 name: 'ContactList',
 props: ['pseudo-slot'],
 data() {
 return {
 contacts: []
 };
 },
 created() {
 fetch('/contacts.json')
 .then(res => res.json())
 .then(data => {
 this.contacts = data;
 })
 .catch(console.error);
 }
 };
</script>
<!-- 使用 ContactList -->
<contact-list :pseudo-slot="({ contact }) => contact.name.first">
 <template #default="{ item }">
 <a :href="`/contacts/${item.id}`">{{ item.name.last }}</a>
 </template>
</contact-list>

 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<!-- Renderless 组件 -->
<script>
 export default {
 props: ['value'],
 data() {
 return {
 tag: ''
 };
 },
 methods: {
 add() {
 if (!this.tag || this.tag.trim().length === 0) {
 return;
 }
 this.$emit('input', [...this.value, this.tag.trim()]);
 this.tag = '';
 },
 remove(tag) {
 this.$emit(
 'input',
 this.value.filter(v => v !== tag)
 );
 }
 },
 render() {
 return this.$scopedSlots.default({
 list: this.value,
 add: this.add, // 传了不一定会用，只是为了适应多种业务场景
 remove: this.remove,
 inputAttrs: {
 value: this.tag
 },
 inputEvents: {
 input: e => {
 this.tag = e.target.value;
 },
 keydown: e => {
 if (e.keyCode === 13) {
 e.preventDefault();
 this.add();
 }
 }
 }
 });
 }
 };
</script>
<!-- 使用 Renderless -->
<template>
 <renderless-component v-model="tags">
 <template #default="{list, remove, inputAttrs, inputEvents}">
 <div class="tags-input">
 <span class="tags-input-tag">
 <span v-for="item in list" :key="item">{{ item }}</span>
 <button class="tags-input-remove" @click="remove">&times;</button>
 </span>
 <input
 class="tags-input-text"
 placeholder="add tag"
 v-bind="inputAttrs"
 v-on="inputEvents"
 />
 </div>
 </template>
 </renderless-component>
</template>
<script>
 export default {
 data() {
 return {
 tags: ['Testing', 'Design']
 };
 }
 };
</script>

 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

var CancelToken = axios.CancelToken;
var source = CancelToken.source();
Vue.component('fetch-data', {
 props: {
 url: {
 type: String,
 required: true
 },
 method: {
 type: String,
 default: 'GET'
 },
 params: {
 type: Object,
 default: {}
 },
 body: {
 type: Object,
 default: {}
 }
 },
 data() {
 return {
 loading: false,
 response: null,
 error: null
 };
 },
 watch: {
 url() {
 this.handleRequest();
 },
 params: {
 handler: this.handleRequest,
 deep: true
 },
 body: {
 handler: this.handleRequest,
 deep: true
 }
 },
 methods: {
 handleRequest() {
 source.cancel();
 this.loading = true;
 axios({
 url: this.url,
 method: this.method.toUpperCase(),
 params: this.params,
 data: this.body,
 cancelToken: source.token
 })
 .then(({ data }) => {
 this.response = data;
 })
 .catch(error => {
 this.error = error;
 })
 .finally(() => {
 this.loading = false;
 });
 }
 },
 created() {
 this.handleRequest();
 },
 render() {
 if (this.loading) {
 return this.$scopedSlots.default({
 loading: true,
 response: null,
 error: null
 });
 }
 return this.$scopedSlots.default({
 loading: false,
 response: this.response,
 error: this.error
 });
 }
});

 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

class FetchData extends React.PureComponent {
 ct = axios.CancelToken.source();
 state = {
 loading: true,
 data: null,
 error: null
 };
 handleRequest = () => {
 this.setState({ loading: true });
 const cancelToken = this.ct.token;
 const { conf } = this.props;
 axios(...conf, cancelToken)
 .then(({ data }) =>
 this.setState({
 data
 })
 )
 .catch(error =>
 this.setState({
 error
 })
 )
 .finally(() => {
 this.setState({
 loading: false
 });
 });
 };
 componentDidMount() {
 this.handleRequest();
 }
 componentDidUpdate() {
 this.setState({
 loading: true,
 data: null,
 error: null
 });
 this.handleRequest();
 }
 componentWillUnmount() {
 if (this.props.conf.methods.toLowerCase() === 'get') {
 this.ct.cancel();
 }
 }
 render() {
 const { children } = this.props;
 // 需要判断是否为函数
 return typeof children === 'function' ? children(this.state) : children;
 }
}
const RenderWithFetchData = props => (
 <FetchData {...props}>
 {({ loading, data, error }) => {
 if (loading) {
 return <Loading />;
 }
 if (data) {
 return <UserProfile {...data} />;
 }
 if (error) {
 return <Error {...error} />;
 }
 }}
 </FetchData>
);