Vue组件和路由

目录

 一、父组件传值子组件

1、接受父组件传值

2、设置传递类型

3、data和props的区别

二、子组件传值父组件

1、子组件调用父组件的方法

三、ref的使用

1、获取dom节点

2、获取组件

四、Vue中路由的使用

1、什么是路由

2、如何使用路由

3、路由的跳转

1.声明式跳转

2.函数式跳转

四、路由重定向

五、选中路由高亮

六、组件的嵌套

七、命名视图

八、计算属性和监听器

watch用法：

Computed用法

属性计算 不能和data里面数据冲突

method、computed和watch的区别

---

 一、父组件传值子组件

1、接受父组件传值

子组件设置props属性就可以接受父组件传值

2、设置传递类型

// 规定了父组件只能传对象类型
        prop1:Object
        // 可以设置多个类型，可以传Number也可以传String
         parentMsg: [Number, String],
        list: {
            // 设置类型
            type: Array,// [Array,String]
            // 设置默认值的时候必须使用函数，原理和data必须使用函数是一样的
            default: function () {
                    return [{
                        name: '这个一个默认的名字'
                    }]
            }

3、data和props的区别

data是组件私有的，props是父组件传过来的

data是可以修改的，props是只读的

二、子组件传值父组件

1、子组件调用父组件的方法

在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）
子组件可以触发子传父  this.$emit( ‘自定义事件’，传递参数)
在父组件中拿到内容需要使用子组件注册的自定义事件，事件的参数就是子组件传递的内容。

三、ref的使用

1、获取dom节点

1、给dom节点记上ref属性，可以理解为给dom节点起了个名字。
2、加上ref之后，在$refs属性中多了这个元素的引用。
3、通过vue实例的$refs属性拿到这个dom元素。

2、获取组件

1、给组件记上ref属性，可以理解为给组件起了个名字。
2、加上ref之后，在$refs属性中多了这个组件的引用。
3、通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。

四、Vue中路由的使用

1、什么是路由

1.后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
2.前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
3.在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

2、如何使用路由

路由的基本使用

1.引入js文件，这个js需要放在vue的js后面
2.创建路由new VueRouter(),接受的参数是一个对象
3.在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
4.path属性是url的地址,component属性就是显示的组件（传组件的对象）
5.创建的路由需要挂载到vue实例上
6.通过路由切换的组件会被放在这里

// 2.创建vuerouter实例
         const router = new VueRouter({
            //  3.创建映射关系
            routes:[
                {
                    // 路径
                    path:'/',
                    // 对应组件
                    component:index
                },
                {
                    path:"/detail",
                    component:detail
                }
            ]
            
        })
const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
        // 4.将路由挂载在vue实例上
        // router:router,
        router
    })

3、路由的跳转

router-link标签可以设置to属性

1.声明式跳转

第一种是query传参，可以传，可以不传。
详情页
获取参数：$route.query.参数名
 
第二种是params传参，必须传参
个人中心
获取参数$route.params.参数名
 
 
以下是在routes数组中的配置
{
    path: "/detail",
    component: detail
},
{
    path: "/mine/:urseid",
    component: mine,
    name: 'mine'
}

2.函数式跳转

 页面跳转
 页面跳转2
todetail() {
             // this.$router  全局路由实例对象
             this.$router.push({
              path: "/detail",
              query: {
                     name: "lisi"  
             })
},
todetail2() {
            this.$router.push({
            name: 'mine',
            params: {
                  urseid: 103
            }
            })
}

四、路由重定向

redirect可以进行路由的重定向，写在routes:[]这个配置属性数组中 ，通过这种方式，在访问/路径的时候会重定向到/login路径

实例：

{
   /    path: '/',
     redirect: "/index"
 },

五、选中路由高亮

使用默认的样式
直接设置router-link-active

自定义样式
配置 linkActiveClass:'自定义的类名'

六、组件的嵌套

1、声明路由的时候设置children,这是children是一个数组，数组里是路由对象
2、这个children的组件就会渲染在它父组件的中

{
   path: '/parent',
   component: parentComp,
    // 涉及到了子路由的内容
       children: [{
  // 这就是用相对路径，相对于父组件的，这个实际路径就是/parent/login
  path: 'login',
  component: login
}]
}

七、命名视图

1、我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件
2、components属性设置的
3、给router-view设置名字，这个名字和components组件名字是对应的
4、设置默认值default对应组件可以设置名字也可以访问

        

            
            
        
 
const router = new VueRouter({
            routes:[
                {
                    path:'/',
                    redirect:"/index"
                },{
                    path:"/index",
                    // component:index
                    components:{
                        default:index,
                        header:header,
                        footer
                    }
                }
            ]
            
        })

结：通过这个路由的嵌套，我们可以实现一些布局，router-view可以设置名字，指定渲染的组件

八、计算属性和监听器

例如：

1、获取完整的名字，需要把姓和名字拼接在一起
2、什么时候去拼接在一起（input值改变的时候）
3、监听keyup知道input什么时候改变了，在这里就可以获取完整的名字
        

   +
   =
  {{fullName}}

watch用法：

watch: {
         "firstname": function (newvalue,oldvalue) {// 第一个参数是新数据，第二个参数是旧数据
          this.name = this.firstname + this.lastname
       },
          "lastname": function (newvalue,oldvalue) {// 第一个参数是新数据，第二个参数是旧数据
           this.name = this.firstname + this.lastname
       }
}

Computed用法

computed:{
         默认只有getter的计算属性
         定义有getter和setter的计算属性（属性计算 不能和data里面数据冲突）
        name:{
               get:function(){
               return this.firstname + '-' + this.lastname
             },
           / 只有修改自身时会触发
               set:function(value){
               console.log(value);
               this.firstname =  value.split("-")[0]
               this.lastname =  value.split("-")[1]
            }
        }
}

属性计算 不能和data里面数据冲突

计算属性中所依赖的任何一个 data 属性改变之后，都会重新触发 本计算属性 的重新计算，从而更新 fullName 的值

method、computed和watch的区别

1、computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；
2、methods方法表示一个具体的操作，主要书写业务逻辑；
3、watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体