vue框架-组件-路由基本用法

最新推荐文章于 2024-05-27 23:35:20 发布

wow_嘟嘟

最新推荐文章于 2024-05-27 23:35:20 发布

阅读量272

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/wow_tutou/article/details/93104465

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

自定义全局组件

先定义组件，Vue.component（'组件名'，{组件模板对象}）

注意：如果组件是用来驼峰命名法，那么在使用时，应用-分割后小写

比如 myH1--------- <my-h1></my-h1>

组件名不要使用原生的标签名
配置组件的模板template 组件的模板有且只有一个根元素

template:'<h1>世界不友好!{{msg}}</h1>',
在视图层调用时，用双标签
组件是一个独立的作用域，也可以看成是一个特殊的vue实例，可以又data，methods，computed等

注意：组件的data是一个函数，组件中需要返回一个对象作为组件的data

列：
```
data(){//组件中的data是一个方法,一定要有返回
    return{
        msg:'对谁都不友好！'
    }
}
```
自定义局部组件

初始化实例，在里面添加一个components

也可以在页面配置模板，在外添加一个template属性，给一个id，
```
<body>
<template id="tpl">
    <h3>注册</h3>
</template>
</body>

components:{
    login:{
        template:'<div>登录!</div>'
    },
    res:{
        template:'#tpl',
    }
}
```
vue提供了一个标签：component标签（可以理解为一个占位符），来展示组件，要通过 :is 来展示
```
<transition name="my">
    <component :is="flag"></component>
</transition>
```

父组件向子组件传值

1.子组件不能访问父组件中的数据，所以需要传值
1. 解决方案：
  
  ① 在父组件中引用子组件时，通过属性绑定 v-bind方法把需要传递给子组件的数据以绑定的形式传递给子组件 :fromfather='父组件的数据'
  
  ② 在子组件的配置项里添加 props：['传递过来的属性（fromfather）']

父组件向子组件传递方法

1. 在父组件引用子组件时，通过事件绑定 @事件名='方法'
1. 在子组件的配置项methods中某一个方法中调用 this.$emit('事件名')

子组件向父组件传值

1.实现父组件向子组件传递方法时，后面传递参数 this.$emit('事件名',子组件的数据1，子组件的数据2)
1. 父组件接收，父组件的事件处理函数中添加形参，获取子组件的数据

路由的基本使用

导入路由模块
创建组件模板对象

let 模板名={ template ：‘模板’}

创建路由对象

let router=new VueRouter({
    //路由匹配规则
    routes:[
        /**
         * 每一个规则都是一个对象,必须要有两个属性
         * 属性1:path表示你要监听的路径
         * 属性2:component表示要展示的对应组件---注意写的是组件模板的名字
         */
        {path:'/',redirect:'/login'},//跟路径下，又重定向/login路径
        {path:'/login',component:login},
        {path:'/register',component:register},

    ],
    /*全局配置点击高亮显示的类*/
    linkActiveClass:'myActive'
});

将路由对象注册到Vue实例中，这样就可以监听到url地址的变化

router:router
使用router-link和router-view来渲染（双标签）
在router-link标签中，要使用to="",""里面一般放path路径，除了路径，还可以放其他属性，

比如<router-link to="/login?id=1&name=zhangsan"> </router-link>

这个时候就可以通过路由对象，输出我们自己定义的id和name值

如下：query(传参和接收参数)

$route.query.id

params(传参和接收参数)

使用params，是直接在path路径里面定义----{path:'/login/:id/:name',component:login},

然后在router-link里面直接传参<router-link to="/login/1/zhangsan"> </router-link>

路由的嵌套

在routes里嵌套一个子路由

/*
* 这里的children也可以看作上面的routes
* 使用children属性配置子路由时，不加'/'
* */
children:[
    {path:'/',redirect:'wangmin'},
    {path:'wangmin',component:red},
    {path:'cc',component:purple},
]

watch监听数据

监听data里的数据，如果data里的数据方式改变，那么watch中对应的方法也会改变