Vue组件系统

发表于 | 分类于
字数统计: 2.2k | 阅读时长 ≈ 12

Vue组件系统之全局组件的注册

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
><div id='app'>
>	<global-component></global-component>
></div>
>	
><script>
>    // 注册
>    Vue.component(
>        // 第一个是组件名称  第二个object
>        "global-component", {
>            // 组件内容  抱一个div-单个根元素
>            template: `<div><h3>{{ db }}</h3></div>`,
>            // data必须是函数
>            data(){
>                // return中写数据
>                return {
>                    db: 'hello',
>                }
>            }
>        }
>    );
>    
>    new Vue({
>        el: '#app',
>        // template: `<global-component></global-component>`
>    })
></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
><div id='app'>
>	
></div>
>	
><script>
>    // 注册组件
>    Vue.component(
>        // 第一个是组件名称  第二个object
>        "global-component", {
>            // 组件内容  抱一个div-单个根元素，包在app这个div中
>            template: `<div><h3>{{ db }}</h3></div>`,
>            // data必须是函数
>            data(){
>                // return中写数据
>                return {
>                    db: 'hello',
>                }
>            }
>        }
>    );
>    
>    new Vue({
>        el: '#app',
>        // 根元素会替换div
>        template: `<global-component></global-component>`
>    })
></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
>// 总结
>Vue.component(
>        // 第一个是组件名称  第二个object
>        "global-component", {
>            // 组件内容  抱一个div-单个根元素，包在app这个div中
>            template: `<div><h3>{{ db }}</h3></div>`,
>            // data必须是函数
>            data(){
>                // return中写数据
>                return {
>                    db: 'hello',
>                },
>			computed: {},
>			watch: {},
>			methods: {},
>            }
>        }
>    );
>
>new Vue({
>        el: '#app',
>        // 根元素会替换div
>        template: `<global-component></global-component>`
>    })
>
>// data 必须是函数
>// 没有属性
>

组件系统之组件的复用

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
><div id='app'>
>	<global-component></global-component>
>    <global-component></global-component>
>    <global-component></global-component>
></div>
>	
><script>
>    // 注册
>    Vue.component(
>        // 第一个是组件名称  第二个object
>        "global-component", {
>            // 组件内容  抱一个div-单个根元素
>            template: `<div><h3>{{ db }}</h3></div>`,
>            // data必须是函数
>            data(){
>                // return中写数据
>                return {
>                    db: 'hello',
>                }
>            }
>        }
>    );
>    
>    new Vue({
>        el: '#app',
>        
>    })
></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
><div id='app'>
>	<app-header></app-header>
>   
></div>
>	
><script>
>    let Header = {
>      	template: `<div><h3>{{ db }}</h3></div>`,
>        data(){
>            return {
>                    db: 'hello',
>                }
>        },
>        computed: {},
>    };
>    
>    new Vue({
>        el: '#app',
>        template: `<app-header></app-header>`,
>        components: {
>            'app-header': Header
>        }
>    })
></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
><div id='app'>
>    <!--<App></App>-->   
></div>
>	
><script>
>    let Header = {
>      	template: `<div><h3>{{ db }}</h3></div>`,
>        data(){
>            return {
>                    db: 'hello',
>                }
>        },
>        computed: {},
>        // ...
>    };
>    // 在入口组件中注册写的局部组件
>    let App = {
>        template: `
>			<div>
>    			<app-header></app-header>
>    		</div>
>		`,
>        components: {
>            'app-header': Header
>        },
>        // 组件的私有数据
>        data(){},
>    };
>    // 根实例
>    new Vue({
>        el: '#app',
>        // 作为根被渲染
>        template: `<App></App>`,
>        components: {
>            // App:App,
>            App,
>        }
>    })
></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
>- 总结
>
>创建组件
>	创建局部组件，起始就是创建一个JavaScript object
>    let Header = {
>      	template: `<div><h3>{{ db }}</h3></div>`,
>        data(){
>            return {
>                    db: 'hello',
>                }
>        },
>        computed: {},
>    };
>注册组件
>	
>    new Vue({
>        el: '#app',
>        template: `<app-header></app-header>`,
>        components: {
>            'app-header': Header
>        }
>    })
>
>组件可以嵌套使用
>
>

Vue组件系统之父子组件的通信

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
><div id='app'>
>   
></div>
>	
><script>
>    // 子
>    let Header = {
>      	template: `<div><h3>{{ db }}</h3><h3>{{ fData }}</h3><</div>`,
>        data(){
>            return {
>                    db: 'hello',
>                }
>        },
>        // 接收父亲传来的数据
>        props:['fData'],
>        computed: {},
>        // ...
>    };
>    // 在入口组件中注册写的局部组件
>    // 父
>    let App = {
>        template: `
>			<div>
>    			<app-header v-bind:fData="fatherData"></app-header>
>    		</div>
>		`,
>        components: {
>            'app-header': Header
>        },
>        // 组件的私有数据
>        data(){
>            return {fatherData: 0,}
>        },
>    };
>    // 根实例
>    new Vue({
>        el: '#app',
>        // 作为根被渲染
>        template: `<App></App>`,
>        components: {
>            // App:App,
>            App,
>        }
>    })
></script>
>

Vue组件系统之子父组件的通信

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
><div id='app'>
></dic>
>
><script>
>    // 子
>    let Header = {
>      	template: `<div> 
>				<button @click='sonClick'>点击改变字体大小</button>
>    		</div>`,
>        methods: {
>            sonClick: function(){
>                // 儿子的的行为传给父亲
>                this.$emit("change-size", 0.1)
>            }  
>        },
>        computed: {},
>        // ...
>    };
>    // 父
>    let App = {
>        template: `
>			<div>
>    			<span :style="{ fontSize: postFontSize + 'em' }">我是字体</span>
>    			<app-header v-on:change-size="fatherClick"></app-header>
>    		</div>
>		`,
>        components: {
>            'app-header': Header
>        },
>        // 组件的私有数据
>        data(){
>            return {
>                postFontSize: 1,
>            }
>        },
>        methods: {
>            // 自己定义的change-size事件，一直在监听，等着儿子传来的信息
>            fatherClick: function(value){
>                this.postFontSize += value;
>            }
>        }
>    };
>    // 根实例
>    new Vue({
>        el: '#app',
>        // 作为根被渲染
>        template: `<App></App>`,
>        components: {
>            // App:App,
>            App,
>        }
>    })
>    
></script>
>

Vue组件系统之混入（mixin）

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
><div id='app'>
></dic>
>		<my-header></my-header>
>        <p></p>
>        <my-app></my-app>
><script>
>    let Header = {
>      	template: `<div> 
>				<button @click='show('xxx')'>点击显示xxx来了</button>
>				<button @click='hide('xxx')'>点击显示xxx去了</button>
>    		</div>`,
>        methods: {
>            show: function(name){
>                console.log(name+'来了');
>            },
>            hide: function(name){
>                console.log(name+'来了');
>            },
>        },
>    };
>    let App = {
>        template: `
>			<div>
>    			<button @mouseenter='show('000')'>点击显示000来了</button>
>				<button @mouseleve='hide('000')'>点击显示000去了</button>
>    		</div>
>		`,
>        methods: {
>            show: function(name){
>                console.log(name+'来了');
>            },
>            hide: function(name){
>                console.log(name+'来了');
>            },
>        }
>    };
>    // 根实例
>    new Vue({
>        el: '#app',
>        components: {
>            "my-header": Header,
>            "my-app": App,
>        }
>    })
>    
></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
><div id='app'>
>    <my-header></my-header>
>        <p></p>
>        <my-app></my-app>
></dic>
>
><script>
>    let mixs = {
>        methods:{
>            show: function(name){
>                    console.log(name+'来了');
>                },
>            hide: function(name){
>                    console.log(name+'来了');
>                },
>        }
>    }
>    let Header = {
>      	template: `<div> 
>				<button @click='show('xxx')'>点击显示xxx来了</button>
>				<button @click='hide('xxx')'>点击显示xxx去了</button>
>    		</div>`,
>        mixins: [mixs],
>    };
>    let App = {
>        template: `
>			<div>
>    			<button @mouseenter='show("000")'>点击显示000来了</button>
>				<button @mouseleve='hide("000")'>点击显示000去了</button>
>    		</div>
>		`,
>        mixins: [mixs],
>    };
>    // 根实例
>    new Vue({
>        el: '#app',
>        components: {
>            "my-header": Header,
>            "my-app": App,
>        }
>    })
>    
></script>
>

Vue组件系统之插槽

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
>- 内容分发
><style>
>    .box {
>        width: 50px;
>        height: 50px;
>        float: left;
>    }
></style>
><div id='app'>
>	<global-component>首页</global-component>
>    <global-component>免费</global-component>
>    <global-component>收费</global-component>
></div>
>	
><script>
>    // 注册全局组件
>    Vue.component(
>        "global-component", {
>            template: `<div class="box"><slot></slot></div>`,
>        }
>    );
>    
>    new Vue({
>        el: '#app',
>    })
></script>
>

Vue组件系统之具名插槽

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
><style>
>    .box {
>        width: 50px;
>        height: 50px;
>        float: left;
>    }
></style>
><div id='app'>
>	<global-component>
>    	<div slot='home'>首页</div>
>        <div slot='free'>免费</div>
>        <div slot='toll'>收费</div>
>    </global-component>
></div>
>	
><script>
>    // 注册全局组件
>    Vue.component(
>        "global-component", {
>            template: `<div class="box">
>					<slot name="home"></slot>
>					<slot name="free"></slot>
>					<slot name="toll"></slot>
>    			</div>`,
>        }
>    );
>    
>    new Vue({
>        el: '#app',
>    })
></script>
>
感谢您的支持！学如逆水行舟，不进则退！