Vue组件的认识

Vue

1.Vue组件：

1.1 定义

Vue组件是Vue实例，可以多次调用，可以扩展HTML元素，组件是可以复用的，与new Vue接收相同的选项，等生命周期函数钩子。如何去定义呢：

let component = {
    //里面放的是一个函数，和ES语法不同
    data(){
        return{
        //返回值对象的唯一拷贝，为了保证组件内部数据不会相互影响
        msg:'数据'
        }
    },
    template:`
        <button @click="我是组件定义">
        {{mag}}     
        </button>
`
}

data内部是一个函数

1.2 组件注册

1.2.1 全局组件

全局注册的组件可以在任何Vue实例和组件内部去使用

//(组件名称，组件传递的参数)
Vue.components('my-com',componet1);

组件被多个调用，使用全局组件

1.2.2 局部组件

局部组件只能在当前实例和组件内部去使用

new Vue({
    el:'#app',
    data:{},
    components:{
        //局部注册到组件内部
        'my-com1':components;
    }
})

缺点： 有时候全局注册也不是一味的好，如Vue打包中，如果你使用像webpack这样的构建系统，全局注册的组件，即使你不再使用也会被包含在构建结果中，这样就造成了资源加入，对下载造成了一些负担

2 组件交互

都知道世界万物都可以进行交互，交流，像html代码一样，一些组件带了一些交互的样式，如：button按钮，你可以点击，这就是交互 ，那么组件之间怎么进行交互呢，组件之间的交互又是什么？

父组件向下传递，事件向上传递，通过Props向下发送数据，子组件通过事件向父组件发送消息

组件之间可以进行通信，传递数据，例如组件A在模板中使用了组件B，他们直接一定会进行数据的通信，举个栗子：

2.1 基础

2.1.1 基本

<!--基本-->
<div id="app">
    <!-- 父接收数据 -->
    {{msg}}
</div>
<script>
    //定义一个组件(子) 
    let component = {
        
    }
    //组件注册
    //实例化
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'你好'
        },
        methods:{},
    })
</script>

2.1.2 全局注册

<!--子组件内有数据，全局注册-->
<div id="app">
    <!-- 父接收数据 -->
    {{msg}}
    <my-com></my-com>
</div>
<script>
    //定义一个组件(子) 
    let component = {
        data(){
            return{
                comMsg:'我是子组件数据'
            }
        },
        //模板字符串,这里存放一些html代码片段
        template:`
    <div>
        <p>我是子组件</p>
        {{comMsg}} <!--将子组件数据拿到-->
    </div>
        `
    }
    //组件注册
    //全局注册
    Vue.component('my-com',component);
    //实例化
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'你好'
        },
        methods:{},
    })
</script>

2.1.3 局部注册

<!--子组件内有数据，局部注册-->
<div id="app">
    <!-- 父接收数据 -->
    {{msg}}
    <my-com></my-com>
</div>
<script>
    //定义一个组件(子) 
    let component = {
        data(){
            return{
                comMsg:'我是子组件数据'
            }
        },
        //模板字符串
        template:`
    <div>
        <p>我是子组件</p>
        {{comMsg}}<br>
    </div>
        `
    }
    //组件注册
    //实例化
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'你好'
        },
        methods:{},
        components:{
            'my-com': component
        }
    })
</script>

2.2 组件通信

<!--组件通信-->
<div id="app">
    <!-- 父接收数据 -->
    {{msg}}
    <my-com title="你好 孩子" :msg="msg" :flag="true"></my-com>
</div>
<script>
    //定义一个组件(子) 
    let component = {
        props:['title','msg','flag'],
        data(){
            return{
                comMsg:'我是子组件数据'
            }
        },
        //模板字符串
        template:`
    <div>
        <p>我是子组件</p>
        {{comMsg}}<br>
        <h1>父组件传递的数据:{{title}}----{{msg}}</h1><br>
        {{flag}}
    </div>
        `,
        created(){
            console.log(this.flag);
        }
    }
    //组件注册
    //实例化
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'你好'
        },
        methods:{},
        components:{
            'my-com': component
        }
    })
</script>

 

2.2.1拓展

<!--组件通信拓展 也可以传递一个对象-->
<div id="app">
    <!-- 父接收数据 -->
    {{msg}}
    <my-com title="你好 孩子" :msg="msg" :flag="true" :obj="{name:'zs'}"></my-com>
</div>
<script>
    //定义一个组件(子) 
    let component = {
        props:['title','msg','flag','obj'],
        data(){
            return{
                comMsg:'我是子组件数据'
            }
        },
        //模板字符串
        template:`
    <div>
        <p>我是子组件</p>
        {{comMsg}}<br>
        <h1>父组件传递的数据:{{title}}----{{msg}}</h1><br>
        <button @click="clickHandler">修改数据</button>
        {{flag}} <!--布尔类型-->
        {{obj}}
    </div>
        `,
        //存放被修改后的数据
        //this是一个Object this.comMsg是comMsg:'我是子组件数据'
        methods:{
            clickHandler(){
                this.comMsg = '我的数据被修改了'
            }
        },
        created(){
            console.log(this.flag);
            console.log(this);
        }
    }
    //组件注册
    //实例化
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'你好'
        },
        methods:{},
        //这里是使用局部组件注册的方法
        components:{
            'my-com': component
        }
    })
</script>

 

2.2.2 总结

动态传参：

没有动态传参：传递的是常量字符串

有动态传参：传递boolean、number、对象、数组、变量等

3 验证

3.1.1 验证传参 默认值等(default)

<!--组件通信 验证传参(动态 非动态) -->
<div id="app">
    <!-- 父接收数据 -->
    {{msg}}
    <my-com title="你好 孩子"  :flag="true" :msg="11" ></my-com>
</div>
<script>
    //定义一个组件(子) 
    let component = {
        props:{
            title:{
                type:String,
                default:'你好'
            },
            obj:{
                //引用数据类型必须由工厂函数返回
                type:Object,
                default(){
                    return {
                        name: '我是obj'
                    }
                }
            },
            msg:{
                type:Number,
                required:true
            },
            flag:{
                type:Boolean,
                required:true
            }
        },
        data(){
            return{
                comMsg:'我是子组件数据'
            }
        },
        //模板字符串
        template:`
    <div>
        <p>我是子组件</p>
        {{comMsg}}<br>
        <h1>父组件传递的数据:{{title}}----{{msg}}</h1><br>
        <button @click="clickHandler">修改数据</button>
        {{flag}} <!--布尔类型-->
        {{obj}}<br>
    </div>
        `,
        //存放被修改后的数据
        //this是一个Object this.comMsg是comMsg:'我是子组件数据'
        methods:{
            clickHandler(){
                this.comMsg = '我的数据被修改了'
            }
        },
        created(){
            console.log(this.flag);
            console.log(this);
        }
    }
    //组件注册
    //实例化
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'你好'
        },
        //这里是使用局部组件注册的方法
        components:{
            'my-com': component
        }
    })
</script>

 

3.1.2 验证自定义事件

<!--组件通信 验证自定义事件-->
<div id="app">
    <!-- 父接收数据 -->
    {{msg}}
    <my-com title="你好 孩子"  :msg="11" @my-event="childHandler"></my-com>
</div>
<script>
    //定义一个组件(子) 
    let component = {
        data(){
            return{
                comMsg:'我是子组件数据'
            }
        },
        //模板字符串
        template:`
    <div>
        <p>我是子组件</p>
        {{comMsg}}<br>
        <button @click="clickHandler">修改数据</button>
        <button @click="emitHandler">向父发送数据</button>
    </div>
        `,
        //存放被修改后的数据
        //this是一个Object this.comMsg是comMsg:'我是子组件数据'
        methods:{
            clickHandler(){
                this.comMsg = '我的数据被修改了'
            },
            emitHandler(){
                // (向上发送的事件名称,当前发送的实参-子组件数据)
                this.$emit('my-event',this.comMsg)
            }
        },
        created(){
            console.log(this);
        }
    }
    //组件注册
    //实例化
    let vm = new Vue({
        el:'#app',
        data:{
            msg:'你好'
        },
        methods:{
            childHandler(val){
                console.log(val)
            }
        },
        //这里是使用局部组件注册的方法
        components:{
            'my-com': component
        }
    })
</script>

3.2 总结

type:String/Number/Boolean 验证传递的数据类型

required:true 表明该参数是必须传递的参数

基本数据类型写在default后面，如：

default: 'hello';  <!--当前参数的默认值为hello-->

当然引用数据类型，需要使用工厂函数的形式返回一个对象或者数组

default()
{
    return{}
}

自定义的验证器：

validator(val){

return val.length > 3

}

单向数据流：

父级的prop数据的更新，会向下流动到子组件中，反之不行

父组件可以修改子组件的数据，而子组件不能直接修改父组件的元素，就想是 父亲可以大儿子，儿子却不可打父亲

作用：防止子组件意外变更状态，影响父组件的状态或数据

类似全局定义，和局部定义变量