1. 全局组件的注册
- 创建根实例的时候，data可以是object，也可以是函数
- 创建组件的时候，data必须是函数
1.1 创建
1 Vue.component('global-component',{
2 template:`
3 <div>
4 <h1>{{ hello }}</h1>
5 </div>
6 `,
7 data(){
8 return {
9 hello:'hello'
10 }
11 },
12 })
1.2 使用
1 let vm = new Vue({
2 el:'#app',
3 template:`
4 <global-component></global-component>
5 `,
6 })
1.3 使用
<div id="app">
<global-component></global-component>
</div>
let vm = new Vue({
el:'#app',
})
2. 局部组件
- data必须是函数(单体函数)
- 没有el属性
1 2.1 创建局部组件 实质就是创建JavaScript object
2
3 let Header = {
4 template:`
5 <div>{{ hello }}</div>
6 `,
7 data(){
8 return {
9 'hello':'hello',
10 }
11 },
12 };
13
14 2.2 注册
15
16 2.2.1
17 //单独使用
18 new Vue({
19 el:'#app',
20 template:`<app-header></app-header>`,
21 components:{
22 'app-header':Header,
23 },
24 });
25
26 2.2.2
27 //嵌套使用
28 let App = {
29 template:`
30 <div>111</div>
31 <app-header></app-header>
32 `,
33 components:{
34 'app-header':Header,
35 },
36 };
37
38 new Vue({
39 el:"#app",
40 template:`<App></App>`,
41 components:{
42 App,
43 },
44 });
3. 组件之间通信
- 父子组件之间的数据 传递拥props 接受父组件的一个事件
- 子父组件之间的数据 传递拥$emit 触发父组件的一个事件
3.1 父子之间通信
1 <div id="app>
2 ...
3 </div>
4
5 let Header = {
6 template:`
7 <div>{{ xxx }}</div>
8 `,
9 props:['xxx'],
10 };
11
12 let App = {
13 template:`
14 <app-header :xxx='parent-data'></app-header>
15 `,
16
17 components:{
18 'app-header':Header,
19 },
20 data(){
21 return {
22 'parent-data':'父组件的数据',
23 }
24 }
25 };
26
27 new Vue({
28 el:'#app',
29 template: `<App></App>`,
30 components:{
31 App,
32 }
33 })
3.2 子父组件的通信
1 <div id="app">
2
3 </div>
4
5 let Header = {
6 template: `
7 <div>
8 <button @click="xxx">给父组件传递数据</button>
9 </div>
10 `,
11 data() {
12 return {
13 'childData': '子组件的数据'
14 }
15 },
16 methods: {
17 xxx() {
18 this.$emit('ooo',this.childData);
19 }
20 }
21 };
22
23 let App = {
24 template: `
25 <div>
26 <h1>父组件接受的数据---{{ childData }}</h1>
27 <app-header @ooo="get_data"></app-header>
28 </div>
29 `,
30
31 data() {
32 return {
33 'childData': '1',
34 }
35 },
36 components: {
37 'app-header': Header,
38 },
39
40 methods: {
41 get_data(value) {
42 console.log(111,value)
43 this.childData = value;
44 }
45 },
46
47 };
48
49 new Vue({
50 el: '#app',
51 template: `<App></App>`,
52 components: {
53 App,
54 },
55 })
4. 混入
- 定义一个mixs object 然后写方法methods(){}
- 使用：mixins = [minx]
- 解决代码重用
1 <div id="app">
2 <dog></dog>
3 <cat></cat>
4 </div>
5
6 <script>
7
8 let mixs = {
9 methods:{
10 show(value){
11 alert(value+'来了');
12 },
13 hide(value){
14 alert(value+'走了');
15 },
16 }
17 };
18
19
20 let Cat = {
21 template: `
22 <div>
23 <button @click="show('小猫')">小猫来了</button>
24 <button @click="hide('小猫')">小猫走了</button>
25 </div>
26 `,
27 data() {
28
29 },
30 mixins:[mixs]
31 };
32
33 let Dog = {
34 template: `
35 <div>
36 <button @mouseenter="show('小狗')">Come</button>
37 <button @mouseleave="hide('小狗')">Go</button>
38 </div>
39 `,
40 mixins: [mixs],
41 };
42
43 new Vue({
44 el: '#app',
45 components: {
46 'dog':Dog,
47 'cat':Cat,
48 },
49 })
50
51 </script>
5. 插槽
1 <div id="app">
2 <global-components>首页</global-components>
3 <global-components>轻课</global-components>
4 <global-components>学位课</global-components>
5 </div>
6
7 Vue.components('global-components',{
8 template:`
9 <div><slot></slot></div>
10 `
11 })
12
13 new Vue({
14 el:'#app',
15 })
6. 具名插槽
1 <div id="app">
2 <global-components>
3 <div>
4 <slot name="header>这是头部</slot>
5 <slot name="footer>这是尾部</slot>
6 </div>
7 </global-components>
8
9 </div>
10
11 Vue.components('global-components',{
12 template:`
13 <div>
14 <slot name="footer"></slot>
15 <slot name="header"></slot>
16 </div>
17 `
18 })
19
20 new Vue({
21 el:'#app',
22 })