vue学习自定义组件篇(六)

自定义组件

• 组件帮助我们实现组件化开发,方便使用
  • 组件化:针对前端,UI界面而言,部分页面为一个组件
  • 模块化:针对后端,业务逻辑而言,每个功能为一个模块

组件

• 组件分类
• 组件传值
• 组件场景
• vue标签

组件分类

• 全局组件
• 私有组件

(1)全局组件

• 定义
• 注册
• 渲染

组件创建的方式

• extend
• {}
• 模板template
  • 这是我们接触到的第一个vue提供的标签

方式一 extend

<div id="app">
    <login></login>
</div>
<script>
    //方式一
    Vue.component("login",Vue.extend({
        template:"<h1>login</h1>"
    }))
    new Vue({
        el:"#app",
        data:{
        }
    })
</script>

方式二 {}

<div id="app">
    <register></register>
</div>
<script>
    //方式二
    Vue.component("register",{
        template:"<h1>register</h1>"
    })
    new Vue({
        el:"#app",
        data:{
        }
    })
</script>

方式三(有提示) template

<div id="app">
    <index></index>
</div>
<template id="index">
    <h1>index</h1>
</template>
<script>
    //方式三
    Vue.component("index",{
        template: "#index"
    })
    new Vue({
        el:"#app",
        data:{
        }
    })
</script>

• 预览
  

(2)私有组件

• 创建
• 注册
• 渲染

<div id="app">
    <login></login>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
        },
        components: {
            "login":{
                template:"<h1>login</h1>"
            }
        }
    })
</script>

组件传值

• 父传子
• 子传父
• 兄弟传

(1)父传子值

• 定义父组件和子组件
• 视图绑定父组件,子元素定义和子元素使用

定义父组件和子组件

• 使用

<div id="app">
    {{msg}}
    <login></login>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"我是父组件"
        },
        components:{
            login:{
                template:"<h1>我是子组件</h1>"
            }
        }
    })
</script>

• 预览
  

视图绑定父组件,子元素定义和子元素使用

• 使用

<div id="app">
    {{msg}}
    <login :son="msg"></login>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"我是父组件"
        },
        components:{
            login:{
                props:["son"],
                template:"<h1> {{son}}</h1>"
            }
        }
    })
</script>

• 预览
  

(2)父传子方法

• 创建父组件和子组件
• 视图绑定父组件,子组件定义,调用

创建父组件和子组件

<div id="app">
    {{msg}}
    <login></login>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"我是父组件"
        },
        components:{
            login:{
                template:"<h1>我是子组件</h1>"
            }
        }
    })
</script>

视图绑定父组件,子组件定义,调用

<div id="app">
    <login @son="show"></login>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"我是父组件"
        },
        methods:{
            show(){
                console.log("我是父组件的方法")
            }
        },
        components:{
            login:{
                template:"<button @click='click'> 子组件</button>",
                methods: {
                    click(){
                        this.$emit("son");
                    }
                }
            }
        }
    })
</script>

• 预览
  

(3)子传父值

• 根据父组件可以给子组件传递方法,可以实现子传父值
  • 子组件可以调用父组件的方法,可以把数据当做参数给父组件
  • 父组件可以定义一个值来接收子组件通过参数传过来的值

  在父传子方法上加上参数

  在子组件上定义数据传,在父组件上定义数据接收

<div id="app">
    <login @son="show"></login>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            msg:"我是父组件"
        },
        methods:{
            show(info){
                console.log("我是父组件的方法------"+info)
            }
        },
        components:{
            login:{
                data(){
                    return{
                        sonData:"我是子组件的值"
                    }
                },
                template:"<button @click='click'> 子组件</button>",
                methods: {
                    click(){
                        this.$emit("son",this.sonData);
                    }
                },

            }
        }
    })
</script>

• 预览
  
  

(4)兄弟传

• 原理
  

• 使用

<div id="app">
    <login></login>
    <register></register>
</div>
<script>
    const middle=new Vue();
    new Vue({
        el:"#app",
        components:{
            "login":{
                data(){
                    return{
                        msg:"login数据"
                    }
                },
                template:"<h1>login</h1>",
                created(){
                    middle.$on("share",function (data){
                        console.log(data)
                    })
                }
            },
            "register":{
                data(){
                    return{
                        msg:"register数据"
                    }
                },
                template:"<button @click='getData'>register</button>",
                methods:{
                    getData(){
                        middle.$emit("share","我是register数据,想要给login分享")
                    }

                }
            }
        }
    })
</script>

• 预览
  

组件场景

• tab栏切换(组件切换)

组件切换

• 两个组件的切换

• 多个组件的切换

两个组件切换

• 遇到的第二个vue标签component
• 使用

<div id="app">
    <a href="#" @click.prevent="flag=true">login</a>
    <a href="#" @click.prevent="flag=false">register</a>
    <login v-if="flag"></login>
    <register v-else="flag"></register>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            flag:"true"
        },
        components:{
            "login":{
                template:"<div><h1>login</h1></div>"
            },
            "register":{
                template: "<div><h1>register</h1></div>"
            }
        }
    })
</script>

• 预览
  

多个组件切换

• 使用component+is

<div id="app">
    <a href="#" @click.prevent="turns('login')">login</a>
    <a href="#" @click.prevent="turns('register')">register</a>
    <a href="#" @click.prevent="turns('index')">index</a>
   <component :is="comName"></component>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            comName:"login"
        },
        components:{
            "login":{
                template:"<div><h1>login</h1></div>"
            },
            "register":{
                template: "<div><h1>register</h1></div>"
            },
            "index":{
                template:"<div><h1>index</h1></div>"
            }
        },
        methods:{
            turns(name){
                this.comName=name
            }
        }
    })
</script>

• 预览
  

总结

• 关键字:component components
• 关键语句:Vue.component(“名称”,{})
• 关键全局定义:extend {} 模板
• 关键标签:template component
• 关键传值:
  • 父传子值:props+:绑定
  • 父传子方法: @绑定方法+$emit
  • 子传父值:@绑定方法+$emit(绑定,参数)
  • 兄弟传值:新vue实例+$emit+ $ on
• 组件场景
  • 两个 flag的两个值 true false
  • 多个 comonent+is

拓展

• props也可为对象:type和default属性

props:{
                    info:{
                        type:String,
                        default:"默认值"
                    }
                }

• 子组件数据的来源

  • data 是一个方法,可读可修改

    • data(){return{}}
    • data一个方法的原因:如果这个组件在页面多次被使用,每个组件都有自己的独立数据,不影响

  • props 父组件传过来的值,可读(强制修改会报错)

• 遇到的vue标签: template component