vue组件化（第四天）-阿里云开发者社区

vue两大核心

1.数据驱动界面

2.组件化

什么是组件化？

1.组件化就是把一个大界面拆分成一个个小组件，相同结构的组件可以进行复用，每一个小界面就是一个组件

组件化有利于提高复用性，简化Vue实例化代码

全局组件

全局组件在任何一个Vue实例控制区域都能使用

Vue中如何创建组件？

创建组件构造器
注册已经创建好的组件
使用注册号的组件
[注意]:创建组件构造器的时候只能有一个根元素，因此我们通常用div直接把我们想包含的元素包起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--    3.使用注册号的组件-->
    <shanjialan></shanjialan>
</div>
<script>
    // 1. 创建组件构造器
    let component=Vue.extend({
        template:`
            <div>
                <p>shanjialan111</p>
                <p>shanjialan222</p>
            </div>
    `});
    // 2.注册已经创建好的组件
    Vue.component("shanjialan",component);
    let vue=new Vue({
        el:"#app",
        data:{
            name:"单佳兰"
        },
        methods:{
            myFn(){
                alert("sjl");
            }
        }
    });
</script>
</body>
</html>

image.png

vue创建组件的简写方法

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })
// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

2. 注册组件，传过来一个组件构造器

Vue.component("shanjialan",Vue.extend({
        template:`<a href="#">link</a>`
    }))

3.省略组件构造器Vue-extend，也会直接调用

Vue.component("bcd",{
        template:`<a href="#">zhiboyu</a>`
    })

总结：上面三种方法定义组件构造器html代码都没有提示，效率比较低，因此我们要想其他办法来避免这个问题——使用script标签添加id属性，并且将type设为text/html即可，再通过id作为构造器的第二个参数传递给vue-component，代码如下：

<script id="info" type="text/html">
    <a href="#">单佳兰</a>
</script>

但是这种方法其实是不大科学的，明明是HTML，为什么要用script进行封装？于是有了第五种方法，使用<template>加上id属性来封装，这个template就相当于<script id="#" type="text/html>

<template id="shanshun">
    <a>shuanshun</a>
</template>

Vue.component("shanshun",{
        template:"#shanshun"
    })

局部组件

局部组件的使用——在vue实例中添加components以键值对的方式定义，里面的格式和全局组件一样

<template id="shanshun">
    <a>shuanshun</a>
</template>

let vue=new Vue(
components:{
  "shanshun":{
        template:"#shanshun"
    })
}

data和method

1.自定义组件中的data和methods

Vue实例相当于一个大的组件，其中有data和methods属性，相同地，自定义组件相当于一个小的组件，因此也有data和methods属性，但是在自定义组件中data不大一样，在自定义组件中使用data必须赋值一个函数，通过函数返回值来定义数据

Vue.component("shanshun", {
        template: "#shanshun",
        data: function() {
            return{
                name: "shanshun22"
              }
        },
    methods:{
         myApp(){alert('shanjialan');}
    })

为什么自定义组件的data不用对象返回，而是通过函数返回的，因为通过对象定义，那么多个组件就会共用一份数据，就会导致数据混乱，将这个方法返回的数据和当前创建的组件绑定在一起，就避免了数据混乱的问题

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <ab></ab>
    <ab></ab>
    <ab></ab>
</div>
<template id="addnum">
    <div>
        <button @click="add">按钮</button>
        <p>{{number}}</p>
    </div>
</template>
<script>
    //自定义组件
    Vue.component("ab",{
        template:"#addnum",
            data:function () {
                return {
                    number: 0
                };
            },
            methods:{
                 add(){
                this.number++;
             }
        }});
    let vue=new Vue(
        {
            el:"#app"
        }
    )
</script>
</body>
</html>

组件切换

用v-if 的方式进行组件的动态切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="toggle">按钮</button>
<photo v-if="isShow"></photo>
    <home v-else></home>
</div>
<template id="photo">
    <a href="vue-animation.html">lainjei</a>
</template>
<template id="home">
    <p>2222</p>
</template>
<script>
    Vue.component("photo",{
        template:"#photo",
    });
    Vue.component("home",{
        template:"#home",
    })
    let vue=new Vue({
        el:"#app",
        data:{
            name:"单佳兰",
            isShow:true
        },
        methods:{
            myFn(){
                alert("sjl");
            },
            toggle(){
                this.isShow=!this.isShow;
            }
        }
    });
</script>
</body>
</html>

这种方式并不是太专业，vue给我们提供了更加专业的做法进行[动态组件 & 异步组件]

语法：<component v-bind:is="currentTabComponent"></component>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="toggle">按钮</button>
    <component v-bind:is="name"></component>
</div>
<template id="photo">
    <a href="vue-animation.html">lainjei</a>
</template>
<template id="home">
    <div>
        <input type="checkbox">
        <span>2222</span>
    </div>
</template>
<script>
    Vue.component("photo",{
        template:"#photo",
    });
    Vue.component("home",{
        template:"#home",
    })
    let vue=new Vue({
        el:"#app",
        data:{
            isShow:true,
            name:'photo'
        },
        methods:{
            toggle(){
               this.name = this.name==='photo'? 'home':'photo';
            }
        }
    });
</script>
</body>
</html>

image.png

我们发现切换之后之前选中的状态不见了，那么怎么样保持之前的状态呢？Vue提供了Keep-alive

<div id="app">
    <button @click="toggle">按钮</button>
    <keep-alive>
        <component v-bind:is="name"></component>
    </keep-alive>
</div>

这样切换也可以保存之前的状态了

组件动画

给组件添加动画和给元素添加动画是一样的，不过不同的是过渡动画的离开和进入动画是同时进行的，要想不同时进行，必须给transition设置mode属性

<component v-bind:is="name"></component>
    </transition>

父子组件

父子组件数据传递

在Vue子组件不能访问父组件的数据，如果子组件想要访问父组件的数据，必须通过父组件传递
如何传递？

在父组件中通过v-bind传递数据
接受格式 v-bind:自定义接受名 = “要传递的数据”
在子组件中通过props接收数据
接收格式： props：[自定义接受名]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <father></father>
</div>
<template  id="father">
    <div>
        <p>我是父组件</p>
        <p>{{name}}---{{age}}</p>
// - 在父组件中通过v-bind传递数据
 //   接受格式 v-bind:自定义接受名 = “要传递的数据”
        <son :parentname="name" :parentage="age"></son>
    </div>
</template>
<template  id="son">
    <div>
        <p>我是子组件</p>
        <p>{{parentname}}---{{parentage}}</p>
    </div>
</template>
<script>
    Vue.component("father",{
        template:"#father",
        data:function (){
            return {name:"shanjialan",age:19};
        },
        components:{
            "son":{
                template: "#son",
//  - 在子组件中通过props接收数据
//    接收格式： props：[自定义接受名]
                props:["parentname","parentage"]
            }
        }
    });
    let vue=new Vue({
        el:"#app",
        data:{
            name:"单佳兰"
        },
        methods:{
            myFn(){
                alert("sjl");
            }
        }
    });
</script>
</body>
</html>

父子组件数据传递方法

在Vue子组件不能直接使用父组件的方法，如果子组件想要使用父组件的方法，必须通过父组件传递
如何传递？

在父组件中通过v-on传递方法
接受格式 v-on:自定义接受名 = “要传递的方法”
在子组件methods中自定义一个方法，方法中通过this.$emit(自定义接收名）来接受方法
在子组件中通过v-on绑定子组件的方法
接收格式： @click=”子组件的方法"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <father></father>
</div>
<template  id="father">
    <div>
        <button @click="say">parent</button>
        <p>我是父组件</p>
        <p>{{name}}---{{age}}</p>
 <!--   - 在父组件中通过v-on传递方法 -->
 <!--     接受格式 v-on:自定义接受名 = “要传递的方法” -->
        <son :parentname="name" :parentage="age" @parentsay="say"></son>
    </div>
</template>
<template  id="son">
    <div>
 <!--   - 在子组件中通过v-on绑定子组件的方法 -->
 <!--   接收格式： @click=”子组件的方法" -->
        <button @click="mySon">son</button>
        <p>我是子组件</p>
        <p>{{parentname}}---{{parentage}}</p>
    </div>
</template>
<script>
    Vue.component("father",{
        template:"#father",
        data:function (){
            return {name:"shanjialan",age:19};
        },
// - 在子组件methods中自定义一个方法，方法中通过this.$emit(自定义接收名）来接受方法
        methods: {
            say(){
                console.log("hello,father");
            }
        },
        components:{
            "son":{
                template: "#son",
                props:["parentname","parentage"],
                methods:{
                    mySon(){
                        this.$emit("parentsay");
                    }
                }
            }
        }
    });
    let vue=new Vue({
        el:"#app",
        data:{
            name:"单佳兰"
        },
        methods:{
            myFn(){
                alert("sjl");
            }
        }
    });
</script>
</body>
</html>

子组件给父组件方法传递参数

this.$emit(第一个参数，第二个参数）

第一个参数，父组件需要传递的方法
第二个参数，子组件给父组件传递的参数

this.$emit("parentsay","家和万事兴");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <father></father>
</div>
<template  id="father">
    <div>
        <button @click="say">parent</button>
        <p>我是父组件</p>
        <p>{{name}}---{{age}}</p>
        <son :parentname="name" :parentage="age" @parentsay="say"></son>
    </div>
</template>
<template  id="son">
    <div>
        <button @click="mySon">son</button>
        <p>我是子组件</p>
        <p>{{parentname}}---{{parentage}}</p>
    </div>
</template>
<script>
    Vue.component("father",{
        template:"#father",
        data:function (){
            return {name:"shanjialan",age:19};
        },
        methods: {
            say(data){
                console.log("hello,father");
                console.log(data);
            }
        },
        components:{
            "son":{
                template: "#son",
                props:["parentname","parentage"],
                methods:{
                    mySon(){
                        //第一个参数，父组件需要传递的方法，第二个参数，子组件给父组件传递的参数
                        this.$emit("parentsay","家和万事兴");
                    }
                }
            }
        }
    });
    let vue=new Vue({
        el:"#app",
        data:{
            name:"单佳兰"
        },
        methods:{
            myFn(){
                alert("sjl");
            }
        }
    });
</script>
</body>
</html>

vue组件的命名注意点

注册组件“驼峰命名法”,在使用时用“短横线”代替

<div id="app">
<!--    两者都可以-->
    <my-father></my-father>
    <my-Father></my-Father>
</div>

如果想使用驼峰命名的数据，在传递时必须使用使用短横线+小写的方式，接受时自动转化为驼峰命名
如果是传递方法，则不能用驼峰命名法，只能用短横线命名法

<son :parent-name="name" :parent-age="age" @parentsay="say"></son>

components:{
            "son":{
                template: "#son",
                props:["parentName","parentAge"],
                methods:{
                    mySon(){
                        //第一个参数，父组件需要传递的方法，第二个参数，子组件给父组件传递的参数
                        this.$emit("parentsay","家和万事兴");
                    }
                }
            }
        }

数据和方法多级传递

补充：

多层传递只能一层一层往下传递，不管是方法还是数据都是如此！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
<grandfather></grandfather>
</div>
<template  id="grandfather">
    <div>
        <button @click="say">爷爷</button>
        <p>{{name}}</p>
        <father :gfname="name" @gfsay="say"></father>
    </div>
</template>
<template  id="father">
    <div>
        <button @click="fathersay">爸爸</button>
        <p>{{gfname}}</p>
        <son :fname="gfname" @ssay="fathersay"></son>
    </div>
</template>
<template  id="son">
    <div>
        <button @click="sonsay">儿子</button>
        <p>{{fname}}</p>
    </div>
</template>
<script>
    Vue.component("grandfather",{
        template: "#grandfather",
        data:function (){
            return{
                name:"grandfather"
            }
        },
        methods: {
            say(){
                console.log("hello");
            }
        },
        components:{
            "father":{
                template:"#father",
                methods: {
                    fathersay() {
                        this.$emit("gfsay");
                    }
                },
                props:["gfname"],
                components: {
                    "son":{
                        template:"#son",
                        props: ["fname"],
                        methods:{
                            sonsay(){
                            this.$emit("ssay");
                            }
                        }
                    }
                }
            }
        }
    })
    let vue=new Vue({
        el:"#app",
        data:{
            name:"单佳兰"
        },
        methods:{
            myFn(){
                alert("sjl");
            }
        }
    });
</script>
</body>
</html>

image.png

vue匿名插槽

默认情况下是不能给子组件添加额外的内容的，如果想要添加，必须使用插槽，——插槽就像一个“坑”，由使用者根据自己的需求来填“坑”，如果不填坑，则显示默认数据，如果填坑的话则将添加的内容替换掉slot;

匿名插槽：有多少个匿名插槽，填充的数据则会拷贝几份；虽然我们可以制定多个匿名插槽，但是在企业开发中推荐只写一个匿名插槽，若一定要有几分，则使用具名插槽

具名插槽

由于匿名插槽的弊端，因此有了具名插槽来弥补不足

如何使用？？

定义插槽的时候给slot指定name
填充的内容指定slot="name"来填充指定插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <father>
        <div slot="one">111</div>
    </father>
    <son>
        <div slot="two">222</div>
    </son>
</div>
<template  id="son">
    <div>
        <p>头部</p>
        <slot name="one"></slot>
        <p>底部</p>
    </div>
</template>
<template  id="father">
    <div>
        <p>头部</p>
        <slot name="two"></slot>
        <p>底部</p>
    </div>
</template>
<script>
    Vue.component(
        "father",{
            template:"#father"
        }
    );
    Vue.component(
        "son",{
            template:"#son"
        }
    );
    let vue=new Vue({
        el:"#app",
        data:{
            name:"单佳兰"
        },
        methods:{
            myFn(){
                alert("sjl");
            }
        }
    });
</script>
</body>
</html>

v-slot指令

专门用于替换slot属性，vue推荐的方式

【注意点】v-slot只能添加在template标签上，v-slot：slotname,简写方式:#

<!--</html>-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <father>
        <template v-slot:two>
            <div>slot1</div>
            <div>slot11</div>
        </template>
    </father>
    <son>
        <template v-slot:one>
            <div>slot2</div>
            <div>slot22</div>
        </template>
    </son>
</div>
<template  id="son">
    <div>
        <p>头部</p>
        <slot name="one"></slot>
        <p>底部</p>
    </div>
</template>
<template  id="father">
    <div>
        <p>头部</p>
        <slot name="two"></slot>
        <p>底部</p>
    </div>
</template>
<script>
    Vue.component(
        "father",{
            template:"#father"
        }
    );
    Vue.component(
        "son",{
            template:"#son"
        }
    );
    let vue=new Vue({
        el:"#app",
        data:{
            name:"单佳兰"
        },
        methods:{
            myFn(){
                alert("sjl");
            }
        }
    });
</script>
</body>
</html>

作用域插槽

什么是作用域插槽？
作用域插槽就是带数据的插槽，让父组件在填充子组件插槽的同时能够使用自组件的数据;
作用域插槽的应用场景: 子组件提供数据, 父组件决定如何渲染

2.怎样使用作用域插槽？

2.1 先给自组件的插槽slot添加v-bind:外界访问的名称="需要暴露的数据"

2.2 在父组件添加的那个插槽<template>中添加slot-scope="scopename"属性接收数据

2.3 在template中通过`scopename.外界访问的名称"接收访问数据

v-bind:names="names"作用: 将子组件names数据暴露给父组件;

slot-scope="abc"作用: 接收子组件插槽暴露的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
<father></father>
</div>
<template id="father" >
    <son>
        <template slot-scope="abc">
            <li v-for="(name,index) in abc.names">{{name}}--{{index}}</li>
        </template>
    </son>
</template>
<template id="son">
    <div>
        <p>头部{{names}}</p>
        <slot v-bind:names="names"></slot>
        <p>底部</p>
    </div>
</template>
<script>
    Vue.component(
        "father", {
            template: "#father",
            components: {
                "son": {
                    template: "#son",
                    data: function () {
                        return {names: ["zs", "ls", "ww"]};
                    }
                }
            }
        }
    );
    let vue=new Vue({
        el:"#app",
        data:{
            name:"单佳兰"
        },
        methods:{
            myFn(){
                alert("sjl");
            }
        }
    });
</script>
</body>
</html>

image.png

v-slot指令

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。
它取代了 slot 和 slot-scope
也就是说我们除了可以通过v-slot指令告诉Vue内容要填充到哪一个具名插槽中，还可以通过v-slot指令告诉Vue如何接收作用域插槽暴露的数据
v-slot:插槽名称="作用域名称"
匿名插槽名称为default

<template v-slot:default="abc">
      <li v-for="(name, index) in abc.names">{{name}}</li>
 </template>

简写：

<template #default="abc">
      <li v-for="(name, index) in abc.names">{{name}}</li>
 </template>

vue组件化（第四天）

vue两大核心

什么是组件化？

全局组件

Vue中如何创建组件？

vue创建组件的简写方法

局部组件

data和method

组件切换

组件动画

父子组件

父子组件数据传递

父子组件数据传递方法

子组件给父组件方法传递参数

vue组件的命名注意点

数据和方法多级传递

vue匿名插槽

具名插槽

v-slot指令

作用域插槽

v-slot指令

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

vue组件化（第四天）

vue两大核心

什么是组件化？

全局组件

Vue中如何创建组件？

vue创建组件的简写方法

局部组件

data和method

组件切换

组件动画

父子组件

父子组件数据传递

父子组件数据传递方法

子组件给父组件方法传递参数

vue组件的命名注意点

数据和方法多级传递

vue匿名插槽

具名插槽

v-slot指令

作用域插槽

v-slot指令

热门文章

最新文章

相关课程

相关电子书