Vue组件开发(初学者也能学会)

一、组件的使用

1.1创建组件的两种方式

var Header = { 
    template:'模板' , 
    data是一个函数,
    methods:功能,
    components:子组件们 
}//局部声明
​
Vue.component('组件名',组件对象);//全局注册 等于注册加声明了

1.2组件的分类

  • 通用组件(例如表单、弹窗、布局类等) (多个项目都可以复用)

  • 业务组件(抽奖、机器分类)(本项目中复用)

  • 页面组件(单页面开发程序的每个页面的都是一个组件、只完成功能、不复用)

  • 组件开发三部曲:声明、注册、使用

注意:子组件的命名,如果有驼峰命名,在使用子组件标签时用“-”隔开

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2</title>
</head>
​
<body>
    组件的使用:组件是开发种最常用的方式。
    <div id="app01"></div>
</body>
<script src="./js/vue2.js"></script>
<script>
    // 使用语法糖来声明局部组件
    var Myheader = {
        template:`
            <div>我是头部</div>
        `
    }
    // 使用完整形式来声明局部组件
    var Mybody = Vue.extend({
        template:`
            <div>我是身体</div>
        `
    });
    // 全局组件的声明和注册是放在一起的,第一个参数是组件名字,第二个参数是组件内容
    Vue.component('myfoot',{
        template:`
            <div>我是尾部</div>
        `
    })
    new Vue({
        el:'#app01',
        // 在模板种使用标签来使用组件
        template:`
            <div>
                <Myheader></Myheader>
                <my-body></my-body>
                <myfoot></myfoot>
            </div>
        `,
        // 使用components 来注册局部组件,
        components:{
            Myheader,
            Mybody
        }
    });
</script>
​
</html>

二、 插槽slot

slot就是在声明子组件时给DOM留下的坑位,以便于父组件在使用子组件的时候可以在坑位里动态的插入自己的内容。

并且,坑位是可以命名的,也就是说,子组件在声明的时候命名坑位,方便父组件在指定的坑位中插入内容

slot是动态的DOM

2.1插槽的使用:

  • 步骤有两步:a.子组件上留坑。b.父组件使用子组件的时候,给坑里赋值.
  • 要有父子组件作为前提。
  • 目的是让子组件成为动态的组件。

2.2匿名插槽

匿名插槽就是在声明的时候没有声明name,会把全部内容都显示

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <Myheader>
            <div>插槽</div>
        </Myheader>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var Myheader={
        template:`
        <div>
            <slot></slot>
            我是头部
            <slot></slot>
        </div>
        `
    }
    new Vue({
        el:'#app',
        //使用components来注册局部组件
        components:{
            Myheader
        }
    })
</script>
</html>

效果:

2.3 具名插槽

具名插槽会在声明时,指定name。会在子组件中有选择的进行展示

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <Myheader>
            <div slot="chacao01">插槽01</div>
            <div slot="chacao02">插槽02</div>
        </Myheader>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    var Myheader={
        template:`
        <div>
            <slot name="chacao01"></slot>
            我是头部
            <slot name="chacao02"></slot>
        </div>
        `
    }
    new Vue({
        el:'#app',
        //使用components来注册局部组件
        components:{
            Myheader
        }
    })
</script>
</html>

效果:

三、$refs和$parent

这两个属性的作用是获取到子组件实例数组和父组件实例。

有了实例,就可以很方便的操作组件的属性和方法。

3.1 $parent

vm.$parent

实例中应用 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       大家好,我是{{name}}
       <button @click="oude">打一顿</button>
        <button @click="seeerwa">爷爷在干吗?</button>
       <saybyebye ref="dawa"></saybyebye>
       <erwa ref="erwa"></erwa>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    //定义了一个局部组件对象
   var saybyebye={
        template:`
        <div>
            <hr>
            子组件 
            {{childName}}--{{lift}}
        </div>
        `,
        data(){
            return{
                childName:'小明',
                lift:100
            }
        },

   }

   var erwa={
        template:`
        <div>
            <hr>
            二娃 
            {{childName}}--{{lift}}
            <button @click="jiaoName">叫爷爷</button>
        </div>
        `,
        data(){
            return{
                childName:'二娃',
                lift:80
            }
        },
        methods:{
            see(){
                console.log("爷爷在给葫芦树浇水");
            },
            jiaoName(){
                this.$parent.name="爷爷"
            }
        },

   }

   var app = new Vue({
    el:'#app',
    data() {
        return {
            name:'张三'
        }
    },
    methods: {
        oude(){
             console.log("打一顿")
             this.$refs.dawa.lift = this.$refs.dawa.lift-10
        },
        seeerwa(){
            this.$refs.erwa.see()
        }
    },
    // 注册局部组件
    components:{
        saybyebye,
        erwa
    }
   })
</script>
</html>

 效果:

3.2 $refs

$refs的使用需要,在子元素上通过ref属性声明自己的引用名称

vm.$refs

 实例中应用 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       大家好
       <button @click="oude">打一顿</button>
        <!-- <button @click="anfu">安抚一下</button> -->
       <saybyebye ref="dawa"></saybyebye>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    //定义了一个局部组件对象
   var saybyebye={
        template:`
        <div>
            <hr>
            子组件 
            {{childName}}--{{lift}}
        </div>
        `,
        data(){
            return{
                childName:'小明',
                lift:100
            }
        },

   }
   var app = new Vue({
    el:'#app',
    data() {
        return {
            name:'张三'
        }
    },
    methods: {
        oude(){
             console.log("打一顿")
             this.$refs.dawa.lift = this.$refs.dawa.lift-10
        }
    },
    // 注册局部组件
    components:{
        saybyebye
    }
   })
</script>
</html>

效果:

四、父子组件间的通信

4.1 父传子 :父传子的时候,通过属性传递

在子组件标签中,自定义属性和值

 <erwa ref="erwa" age="2" :shuxing="shuxing"></erwa>

在子组件内部,通过props属性,获取所有的值

  methods:{
            see(){
                console.log("爷爷在给葫芦树浇水");
            },
            jiaoName(){
                this.$parent.name="爷爷"
            }
        },
        props:[age,shuxing]

 实例中应用 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       大家好,我是{{name}}
       <button @click="oude">打一顿</button>
        <button @click="seeerwa">爷爷在干吗?</button>
       <saybyebye ref="dawa"></saybyebye>
       <erwa ref="erwa" age="2" :shuxing="shuxing"></erwa>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    //定义了一个局部组件对象
   var saybyebye={
        template:`
        <div>
            <hr>
            子组件 
            {{childName}}--{{lift}}
        </div>
        `,
        data(){
            return{
                childName:'小明',
                lift:100
            }
        },

   }

   var erwa={
        template:`
        <div>
            <hr>
            二娃 ---{{age}}---{{shuxing}}
            {{childName}}--{{lift}}
            <button @click="jiaoName">叫爷爷</button>
        </div>
        `,
        data(){
            return{
                childName:'二娃',
                lift:80
            }
        },
        methods:{
            see(){
                console.log("爷爷在给葫芦树浇水");
            },
            jiaoName(){
                this.$parent.name="爷爷"
            }
        },
        props:['age','shuxing']

   }

   var app = new Vue({
    el:'#app',
    data() {
        return {
            name:'张三',
            shuxing:'吐水'
        }
    },
    methods: {
        oude(){
             console.log("打一顿")
             this.$refs.dawa.lift = this.$refs.dawa.lift-10
        },
        seeerwa(){
            this.$refs.erwa.see()
        }
    },
    // 注册局部组件
    components:{
        saybyebye,
        erwa
    }
   })
</script>
</html>

效果:

4.2 子传父:子组件给父组件传递数据,采用的是$emit,自定义事件的方式完成

子组件触发自定义事件

var erwa={
        template:`
        <div>
            <hr>
            二娃 ---{{age}}---{{shuxing}}
            {{childName}}--{{lift}}
            <button @click="jiaoName">叫爷爷</button>
            <button @click="dogxi">给爷爷送东西</button>
        </div>
        `,
        data(){
            return{
                childName:'二娃',
                lift:80
            }
        },
        methods:{
            see(){
                console.log("爷爷在给葫芦树浇水");
            },
            jiaoName(){
                this.$parent.name="爷爷"
            },
            dogxi(){
                //触发自定义事件
                this.$emit('shijian',this.childName)
            }
        },
        props:['age','shuxing']

   }

父组件监听自定义事件

<erwa @shijian="liwu" ref="erwa" age="2" :shuxing="shuxing"></erwa>

var app = new Vue({
    el:'#app',
    data() {
        return {
            name:'张三',
            shuxing:'吐水'
        }
    },
    methods: {
        oude(){
             console.log("打一顿")
             this.$refs.dawa.lift = this.$refs.dawa.lift-10
        },
        seeerwa(){
            this.$refs.erwa.see()
        },
        liwu(childName){
            console.log(childName+"给您送鱼了");
        }
    },
    // 注册局部组件
    components:{
        saybyebye,
        erwa
    }

 实例中应用 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       大家好,我是{{name}}
       <button @click="oude">打一顿</button>
        <button @click="seeerwa">爷爷在干吗?</button>
       <saybyebye ref="dawa"></saybyebye>
       <erwa @shijian="liwu" ref="erwa" age="2" :shuxing="shuxing"></erwa>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    //定义了一个局部组件对象
   var saybyebye={
        template:`
        <div>
            <hr>
            子组件 
            {{childName}}--{{lift}}
        </div>
        `,
        data(){
            return{
                childName:'小明',
                lift:100
            }
        },

   }

   var erwa={
        template:`
        <div>
            <hr>
            二娃 ---{{age}}---{{shuxing}}
            {{childName}}--{{lift}}
            <button @click="jiaoName">叫爷爷</button>
            <button @click="dogxi">给爷爷送东西</button>
        </div>
        `,
        data(){
            return{
                childName:'二娃',
                lift:80
            }
        },
        methods:{
            see(){
                console.log("爷爷在给葫芦树浇水");
            },
            jiaoName(){
                this.$parent.name="爷爷"
            },
            dogxi(){
                //触发自定义事件
                this.$emit('shijian',this.childName)
            }
        },
        props:['age','shuxing']

   }

   var app = new Vue({
    el:'#app',
    data() {
        return {
            name:'张三',
            shuxing:'吐水'
        }
    },
    methods: {
        oude(){
             console.log("打一顿")
             this.$refs.dawa.lift = this.$refs.dawa.lift-10
        },
        seeerwa(){
            this.$refs.erwa.see()
        },
        liwu(childName){
            console.log(childName+"给您送鱼了");
        }
    },
    // 注册局部组件
    components:{
        saybyebye,
        erwa
    }
   })
</script>
</html>

 效果:

 五、非父子组件的通信

5.1 创建一个公共组件

//在Vue类的原型对象上,增加一个公共组件。这样所有的组件都可以使用此组件
    Vue.prototype.$middles=new Vue();

5.2 发送方,在公共组件上,触发一个事件

 //触发公共组件的自定义
                this.$middles.$emit('zhuanzou','爷爷被妖怪抓走了,咱俩去救爷爷')

5.3 接收方,监听公共组件上的这个事件,并接受数据

 mounted() {
            //绑定监听,公共组件的指定事件
            this.$middles.$on('zhuanzou',val=>{
                this.lift=100
                console.log(val);
            })
        },

 实例中应用 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       大家好,我是{{name}}
       <button @click="oude">打一顿</button>
        <button @click="seeerwa">爷爷在干吗?</button>
       <saybyebye ref="dawa"></saybyebye>
       <erwa @shijian="liwu" ref="erwa" age="2" :shuxing="shuxing"></erwa>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    //在Vue类的原型对象上,增加一个公共组件。这样所有的组件都可以使用此组件
    Vue.prototype.$middles=new Vue();

    //定义了一个局部组件对象
   var saybyebye={
        template:`
        <div>
            <hr>
            子组件 
            {{childName}}--{{lift}}
            <button @click="hujiao2">呼叫二娃</button>
        </div>
        `,
        data(){
            return{
                childName:'小明',
                lift:100
            }
        },
        methods:{
            hujiao2(){
                //触发公共组件的自定义
                this.$middles.$emit('zhuanzou','爷爷被妖怪抓走了,咱俩去救爷爷')
            }
        }

   }
   //二娃
   var erwa={
        template:`
        <div>
            <hr>
            二娃 ---{{age}}---{{shuxing}}
            {{childName}}--{{lift}}
            <button @click="jiaoName">叫爷爷</button>
            <button @click="dogxi">给爷爷送东西</button>
        </div>
        `,
        data(){
            return{
                childName:'二娃',
                lift:80
            }
        },
        methods:{
            see(){
                console.log("爷爷在给葫芦树浇水");
            },
            jiaoName(){
                this.$parent.name="爷爷"
            },
            dogxi(){
                //触发自定义事件
                this.$emit('shijian',this.childName)
            }
        },
        props:['age','shuxing'],
        mounted() {
            //绑定监听,公共组件的指定事件
            this.$middles.$on('zhuanzou',val=>{
                this.lift=100
                console.log(val);
            })
        },
   }

   var app = new Vue({
    el:'#app',
    data() {
        return {
            name:'张三',
            shuxing:'吐水'
        }
    },
    methods: {
        oude(){
             console.log("打一顿")
             this.$refs.dawa.lift = this.$refs.dawa.lift-10
        },
        seeerwa(){
            this.$refs.erwa.see()
        },
        liwu(childName){
            console.log(childName+"给您送鱼了");
        }
    },
    // 注册局部组件
    components:{
        saybyebye,
        erwa
    }
   })
</script>
</html>

 效果:

 

 六、混入(mixin)

定义

提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项

写法

6.1 局部混入

定义个混入对象
    data(){
            return{
                mixinName:'葫芦'
            }
        },
        mounted() {
            console.log('混入对象',this.mixinName);
        },
    }
引用使用
mixins:[commonMiXin]

  实例中应用 代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       大家好,我是{{name}}
       <button @click="oude">打一顿</button>
        <button @click="seeerwa">爷爷在干吗?</button>
       <saybyebye ref="dawa"></saybyebye>
       <erwa @shijian="liwu" ref="erwa" age="2" :shuxing="shuxing"></erwa>
    </div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
    //在Vue类的原型对象上,增加一个公共组件。这样所有的组件都可以使用此组件
    Vue.prototype.$middles=new Vue();

    var commonMiXin={
        data(){
            return{
                mixinName:'葫芦'
            }
        },
        mounted() {
            console.log('混入对象',this.mixinName);
        },
    }

    //定义了一个局部组件对象
   var saybyebye={
        template:`
        <div>
            <hr>
            子组件 
            {{childName}}--{{lift}}--{{mixinName}}
            <button @click="hujiao2">呼叫二娃</button>
        </div>
        `,
        data(){
            return{
                childName:'小明',
                lift:100
            }
        },
        methods:{
            hujiao2(){
                //触发公共组件的自定义
                this.$middles.$emit('zhuanzou','爷爷被妖怪抓走了,咱俩去救爷爷')
            }
        },
        mixins:[commonMiXin]

   }
   //二娃
   var erwa={
        template:`
        <div>
            <hr>
            二娃 ---{{age}}---{{shuxing}}
            {{childName}}--{{lift}}
            <button @click="jiaoName">叫爷爷</button>
            <button @click="dogxi">给爷爷送东西</button>
        </div>
        `,
        data(){
            return{
                childName:'二娃',
                lift:80
            }
        },
        methods:{
            see(){
                console.log("爷爷在给葫芦树浇水");
            },
            jiaoName(){
                this.$parent.name="爷爷"
            },
            dogxi(){
                //触发自定义事件
                this.$emit('shijian',this.childName)
            }
        },
        props:['age','shuxing'],
        mounted() {
            //绑定监听,公共组件的指定事件
            this.$middles.$on('zhuanzou',val=>{
                this.lift=100
                console.log(val);
            })
        },
       
   }

   var app = new Vue({
    el:'#app',
    data() {
        return {
            name:'张三',
            shuxing:'吐水'
        }
    },
    methods: {
        oude(){
             console.log("打一顿")
             this.$refs.dawa.lift = this.$refs.dawa.lift-10
        },
        seeerwa(){
            this.$refs.erwa.see()
        },
        liwu(childName){
            console.log(childName+"给您送鱼了");
        }
    },
    // 注册局部组件
    components:{
        saybyebye,
        erwa
    }
   })
</script>
</html>

效果: 

Vue.mixin(myMixin);

6.2  全局混入

定义个混入对象

引入使用

Vue.mixin(myMixin);

 

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值