vueJS04模块化和组件

1.模块化和组件
组件化和模块化的不同：
模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

2.组件的创建
2.1 全局组件

//全局的组件创建 ,注意：使用组件的时候应该这样用
        Vue.component(“myComponent”, {
            template: “

这是我们定义的第一个组件

”
        })

//使用template标签的方式来声明页面模板
        Vue.component(“myComponent2”, {
            template: “#tmpl”
        })

                      

2.2 私有组件

var vm = new Vue({
            el: “#app”,
            data: {},
            methods: {},
            components:{
              login:{
                template:"#tmpl"
                // template:“

这是登陆组件

”    
              }  
            }
        })

3.组件中的事件和数据

//定义一个counter组件，该组件使用的页面模板是tmpl
        Vue.component(“counter”,{
            template:"#tmpl",
            //声明counter组件中的数据
            //组件中的data必须是一个function，而且必须return一个新的实例
            data:function(){
                return {
                    count:100
                }
            },
            //声明counter组件中的方法
            methods:{
                add(){
                    this.count++;
                }
            }
        })

        

           这是counter组件 
           <button @click=“add”>点我+1
           {{count}}
        

    

// 为什么组件中的data必须是一个function，而且必须return一个新的对象?
        //答案：因为组件是可以高度复用的，当声明一个组件之后，我们可以在页面上使用很多次从而创建很多个组件对象.
        //那么这些组件对象之间应该相互独立的，彼此不应该有任何影响，故而他们之间不能共用同一份数据源，所以才需要在data的function中return一个新的对象

4.组件的切换
4.1 通过v-if和v-else实现切换

        

4.2 通过component方式切换组件

        
        
            
        

5.keep-alive组件

                
            

6.父子组建的通信
6.1 父组件传值给子组件
1.在子组件中声明props
props: [‘message’],

2.在父组件页面中使用子组件的时候给子组件传递数据

        这是App组件                  

3.在子组件页面中就可以使用父组件传递过来的数据了         

                         {{message}}         

注意点：我们不要在子组件中直接修改父组件传递过来的数据，因为该数据的拥有者是父组件，所以我们认为props是只读的
6.2 子组件给父组件传递数据

1. 在父组件中声明一个方法用于接收子组件传递过来的数据
   var vm = new Vue({
               el: “#app”,
               data: {
                   childMsg:""
               },
               methods: {
                   //1.子组件给父组件传递数据第一步：在父组件中声明一个方法用于接收子组件传递的数据
                   receiveFromChild(msg){
                       this.childMsg = msg;
                   }
               },
               components: {
                   login
               }
           })

2. 在父组件的页面中使用子组件的时候把这个方法传递给子组件

        这是App组件  {{childMsg}}                  

3.在子组件的方法中触发父组件传递过来的方法，从而给父组件传递数据
//子组件
        var login = {
            template: “#login”,
            data() {
                return {
                    name: “哈哈，我叫login子组件”
                }
            },
            methods: {
                //3.在子组件的方法中触发父组件传递过来的方法，从而给父组件传递数据
                sendMsg(){
                    this.$emit(“func”,this.name);
                }
            }
        }

7.this.$refs的问题

//获取到当前组件的子组件login中的h4这个ref的引用
//console.log(this.$refs.log.$refs.h4);

//获取到当前组件的父组件中的span这个ref的引用 
console.log(“子组件”,this.$parent.$refs.span);

8.中央事件总线
1.注册一个中央事件总线(空Vue实例)
var bus = new Vue();

2.使用bus.$emit去发送数据bus.$emit(‘sendFromLogin’, “哈哈，我是login”);

3.使用bus.$on来接收数据bus.$on(“sendFromLogin”, function (msg) {
        console.log(msg)
 })

9.provide和inject

var com1 = {
            template: “#tmpl”,
            //在孩子中通过inject来注入vm实例中暴露出来的数据
            inject:[‘msg’],
        }

var vm = new Vue({
            el: “#app”,
            data: {},
            methods: {},
            components: {
                com1
            },
            //通过provide向孩子们(孩子的孩子们)暴露数据
            provide() {
                return {
                    msg:“来自父亲的东西”
                }
            }
        })

10.插槽

1、声明子组件的时候可以使用插槽

        

   
            
            这是子组件
            
        

    

2.在使用子组件的时候可以给插槽指定内容

            

                

头

            

            

尾

11.路由
在框架中，我们都说vue、react、angular开发的都是单页面(Single Page Application)应用程序，整个应用只有一个页面。

在单页面应用中，有一个很重要的概念是路由

    

                 登录         注册

        
    

    

//2.创建一个路由对象
        var vueRouter = new VueRouter({
            //路由规则
            routes: [
                { path: ‘/login’, component: login },
                { path: ‘/register’, component: register }
            ]
        })

//3.将路由对象挂载到VM实例中
        var vm = new Vue({
            el: “#app”,
            data: {},
            methods: {},
            router: vueRouter
        })
    

12.前端路由的模式
12.1 第一种模式是hash模式
特点：
1.路由切换过程中不会向服务器发请求
2.刷新页面的时候会向服务器发请求(但是hash部分的内容不会提交到服务器)，所以刷新页面没有问题

12.2 history模式
特点：
1.路由切换过程中不会向服务器发请求
2.刷新页面的时候，会向服务器发请求。但是由于现在的url是下面这样的http://127.0.0.1:5500/login 。所以此时刷新网页会请求服务器的login接口，而我们又没有写对应的接口，所以此时报404
3.所以history模式下不能刷新网页

12.3 前端路由切换的原理
我们是如何做到点击router-link切换组件的呢？
登录

当我们点击router-link的时候会去打开加载的路由地址，比如我们点击上面的router-link标签的时候，会去访问/logi这个url，然后vue-router.js会使用window.onhashchange或者window.history.pushState方法来监听url的变化，根据指定的url找到url所匹配的组件，然后再把匹配的组件放到组件中显示。

1.当我们使用的是hash模式的 时候，
在vue-router.js的2.8版本之前，在路由的hash部分发生了任何变化，都会执行window.onhashchange方法，在这个方法内部我们可以根据当前匹配到的hash去加载对应的组件
在vue-router.js的2.8版本之后，内部使用window.history.pushState来完成相应的功能

2.当我们使用的是history模式的时候，
内部使用window.history.pushState来处理url的变化，切换对应的组件

13.路由传参
13.1 query方式传参
登录 
登录

this.$route.query.name

13.2 params方式传参
登录

this.$route.params.name

13.3 query方式传参和params方式传参的区别
1.params方式传参的时候:to后面只能用name而不能用path
2.query方式传参的时候可以使用path来引入路由
3.params方式传参的时候，参数也是路由的一部分；query方式传参，参数只是url后面的一些信息，不是路由的组成部分。所以params方式传参的时候一刷新页面，参数就没了；query方式传参，刷新页面参数仍然在
4.params方式传参，参数类似于post请求，在地址栏中不显示参数的信息；query方式传参，类似于get请求，参数会在url中提现

13.4 动态路由传参

1.修改路由配置
var vueRouter = new VueRouter({
            routes: [
                { path: ‘/login’, name: “login”, component: login },
                { path: ‘/register/:id’, component: register }
            ],
            linkActiveClass: ‘myactive’
        })

2.在router-link中使用动态路由传参
注册

3.获取动态路由参数
this.$route.params.id