vue第五天-路由使用以及组件扩展

已于 2022-03-25 23:01:44 修改
阅读量458 收藏 1
点赞数
分类专栏： web前端 文章标签： vue.js
于 2022-03-25 23:01:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/China_11111/article/details/123747191
版权

目录

今日任务

掌握组件父子之间的传值

掌握路由的使用

实现经典布局

定义vue组件

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

组件化和模块化的不同：

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一

组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

1.1 父组件传值子组件

接受父组件传值

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

注意事项 

data和props的区别

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

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

1.2 子组件传值父组件

子组件调用父组件的方法

在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）

子组件可以触发这个事件$emit('事件名字')

子组件给父组件传递数据

$emit方法第二个参数可以定义子组件给父组件传递的内容

在父组件中怎么拿到这内容

.（1）父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到

（2）父组件有自定义参数，可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。

1.3评论列表案例

将评论发表做成一个组件，发表后保存到localStorage中

获取用户输入的值

构造一个对象

把数据存起来（localStorage）

 首先获取已经保存的数据(localStorage.getItem('key')).

 把数据添加进去

 在把数据保存到localStorage中(localStorage.setItem('key','value'))

子组件更新后父组件同步更新

子组件更新数据后，通知父组件

1.1 父组件引用子组件的时候注册一个事件

1.2子组件更新完数据之后调用$emit方法通知父组件

1.4ref的使用

获取dom节点

给dom节点记上ref属性，可以理解为给dom节点起了个名字。

加上ref之后，在$refs属性中多了这个元素的引用。

通过vue实例的$refs属性拿到这个dom元素。

获取组件

给组件记上ref属性，可以理解为给组件起了个名字。

加上ref之后，在$refs属性中多了这个组件的引用。

通过vue实例的$refs属性拿到这个组件的引用，之后可以通过这个引用调用子组件的方法，或者获取子组件的数据。

示例：

二. Vue中路由的使用

2.1 什么是路由

后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源

前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

 2.2 如何使用路由

路由的基本使用

引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）

创建路由new VueRouter(),接受的参数是一个对象

在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性

path属性是url的地址,component属性就是显示的组件（传组件的对象）

创建的路由需要和vue实例关联一下

路由到的组件显示在哪个位置

示例： 

 2.3路由的函数跳转

2.4路由高亮

2.5路由的嵌套

声明路由的时候设置children,这是children是一个数组，数组里是路由对象

这个children的组件就会渲染在它父组件的中

示例： 

 2.6命名视图

我们之前只能一个地址对应一个组件，现在可以一个地址对应多个组件

components属性设置的

给router-view设置名字，这个名字和components组件名字是对应的

设置默认值default对应组件可以设置名字也可以访问

2.8计算属性和监听

获取完整的名字，需要把姓和名字拼接在一起

什么时候去拼接在一起（input值改变的时候）

监听keyup知道input什么时候改变了，在这里就可以获取完整的名字

 示例：

今日任务

掌握组件父子之间的传值

掌握路由的使用

实现经典布局

定义vue组件

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

组件化和模块化的不同：

  • 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一

  • 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

1.1 父组件传值子组件

  • 接受父组件传值

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

  • 属性的继承和传递

属性继承的特征：

父组件的属性会覆盖子组件的属性

class 和 style 会进行合并，不会覆盖

设置禁用继承

加在子组件上的属性，使用了这个属性之后会阻止组件继承父组件的属性，但是class和style除外

inheritAttrs: false

在组件内可以使用$attrs获取父组件传过来的属性

  • 注意事项 

data和props的区别

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

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

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../vue-2.4.0.js"></script>
    <script src="../axios.js"></script>
</head>
<body>
    <div id='app'>
        <father formapp="来自app传值"> </father>
        <father></father>
    </div>

    <template id="father">
        <div>
            father{
  {msg}}

                {
  {formapp}}
                <son add="随意"></son>
                <son></son>
        </div>
    </template>
    <template id="son">
        <div>
            son{
  {add}}
        </div>

    </template>

    <script>

        Vue.component("father",{
            template:"#father",
            data(){
                return {
                    msg:'hello'
                }
            },
            //接受父组件传值
            props:{
                formapp:{
                    type:[String,Number],
                    default:'fromappfather'
                },
            },
            created(){
                console.log(this.formapp);
            },
        })
        Vue.component("son", {
            template: "#son",
            data(){
                return {

                }
            },
            props:{
                add:{
                    type:[String,Number],
                    default(){
                        return 'suiyi'
                    }
                }
            }
        })


    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        }
    })
    </script>
</body>
</html>

1.2 子组件传值父组件

子组件调用父组件的方法

  1. 在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）

  2. 子组件可以触发这个事件$emit('事件名字')

子组件给父组件传递数据

  1. $emit方法第二个参数可以定义子组件给父组件传递的内容

  2. 在父组件中怎么拿到这内容

.（1）父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到

（2）父组件有自定义参数，可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../vue-2.4.0.js"></script>
    <script src="../axios.js"></script>
</head>
<body>
    <div id='app'>
        <father></father>
    </div>


    <template id="father">
        <div>
            子组件调用父组件的方法
            1、在父组件中给引用的字组件注册一个事件  （这个事件的名字是自定义的）
            2、子组件可以触发这个事件$emit(‘自定义事件’，传递参数)

                father
                <br>
                子传父：{
  {fromsondata}}
                <br>
                <son @myson="fromson"></son>
        </div>
    </template>

    <template id="son">
        <div>
            son
            <button @click="toofather">点我传参</button>
        </div>
    </template>
    <script>
        Vue.component("father",{
            template: "#father",
            data(){
                return{
                    msg: 'hello',
                    fromsondata:""
                }
            },
            methods:{
                //data就是子组件传的值
                fromson(data){
                    console.log(data);
                    this.fromsondata = data
                }
            }
        })

Vue.component("son",{
    template: "#son",
    data(){
        return {

        }
    },
    created(){
        // 触发子传父  this$enit('自定义事件',传递参数)
        // this.$emit('myson', '这是来自子组件的参数')
    },
    methods:{
        toofather(){
            //子传父
            this.$emit('myson','这是子组件的参数')
        }
    }
})









    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        }
    })
    </script>
</body>
</html>

1.3评论列表案例

  • 将评论发表做成一个组件，发表后保存到localStorage中

  1. 获取用户输入的值

  2. 构造一个对象

  3. 把数据存起来（localStorage）

 首先获取已经保存的数据(localStorage.getItem('key')).

 把数据添加进去

 在把数据保存到localStorage中(localStorage.setItem('key','value'))

  • 子组件更新后父组件同步更新

  1. 子组件更新数据后，通知父组件

1.1 父组件引用子组件的时候注册一个事件

1.2子组件更新完数据之后调用$emit方法通知父组件

 示例1：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
   <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.min.css">
   <script src="../vue-2.4.0.js"></script>
</head>
<body>
    <div id='app'>
        
        <div class="container">
            
            <div class="panel panel-info">
                  <div class="panel-heading">
                        <h3 class="panel-title">留言板</h3>
                  </div>
                  <div class="panel-body">
                    
                    <form action="" method="POST" role="form">
                     
                    
                        <div class="form-group">
                            <label for="">姓名</label>
                            <input type="text" class="form-control" id="" placeholder="Input field">
                        </div>

                        
                        <div class="form-group">
                            <label for="">留言</label>
                            <input type="text" class="form-control" id="" placeholder="Input field">
                        </div>
                    
                        
                    
                        <button type="submit" class="btn btn-primary" @click="addComment">发布评论</button>
                    </form>
                    <br>
                    
                    <ul class="list-group">
                        <li class="list-group-item" v-for="(item,index) in list" :key="index">

                            {
  {item.comment}}
                            <span class="badge">评论人：{
  {item.name}}</span>

                        </li>
                        
                    </ul>
                    
                    

                  </div>
            </div>
            

        </div>
        
    </div>

    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            name:'',
            comment:'',
            list:[],
        },
        methods: {
            addComment(){
                this.list.push({
                    name:this.name,
                    comment:this.comment
                })
            }
        }
    })
    </script>
</body>
</html>

示例2子传父：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
   <link rel="stylesheet" href="../bootstrap-3.4.1-dist/css/bootstrap.min.css">
   <script src="../vue-2.4.0.js"></script>
</head>

<body>
    <div id='app'>


        <div class="container">



            <!-- 引入子组件 -->
            <son @getlist="fr
最低0.47元/天 解锁文章
十一点就睡a
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue扩展工具安装-vue-devtools，web网页开发
m0_60635001的博客
03-18 902
二、安装//切换到此目录下// 切换到主分支// 输入npm install 恢复// 安装过程出现错误可能是缓存问题，清除缓存就好了// 打包上线 生成dist目录// 出现以下成功DONE Compiled successfully in 13911ms 下午3:48:22修改配置shells>manifest.json> persistent 改为true。
Vue路由和组件库
weixin_63473024的博客
03-03 936
vue路由 1-什么是路由 --路径与组件之间的关系 2-为什么使用路由---在一个页面中切换业务场景.所有的功能在一个页面上实现,利用路由的功 能实现不切换页面进行局部刷新,实现极高的体验感,开发效率高,数据传递容易,这就是前端 路由的作用 3-缺点 --开发成本高 需要学习专门的知识 首次加载的时候比较慢,不利于seo 一-基本使用 1--安装 ==> yarn add v...
vue脚手架,vue3 组件 vue-property-decorator 组件
09-11
vue脚手架 本框架已开发了所属相关组件，如有 定制组件 需求可联系
vue-tags-input组件使用指南(推荐)
10-15
主要介绍了vue-tags-input组件使用指南,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue中组件通信的方式
TangJing_的博客
08-15 1198
vue的数据通信方式
vue路由使用以及组件扩展
weixin_49491274的博客
06-02 573
<a href="#">登录</a> | <a href="#">注册</a>
Vue-day05
weixin_43996260的博客
03-25 766
一、 子组件传值父组件 子组件调用父组件的方法 在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的） 子组件可以触发这个事件$emit('事件名字',传递的参数) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
vue vue-router props props:true 路由属性,路由组件既可以做组件,又可以做功能组件
weixin_45810135的博客
09-29 3485
routes:[ path:’/about’, component:About, props:true ] 实现父传子props参数 与 路由传参params 参数的合并
vue路由使用以及组件化扩展
weixin_67867115的博客
03-25 614
一、子传父 子组件调用父组件的方法： 1.在父组件中给引用的子组件注册一个事件（事件名自定义） <template id="father"> <div> father{{fromsondata}} <son @myson="fromson"></son> </div> </template> 2.子组件可以触发这个事件this.$emit('事件名
vue组件化&路由
blog_pancc的博客
05-31 322
1.私有自定义指令​ 只在当前组件中生效的指令。在每个vue组件中,可以在directives节点下,声明私有自定义指令bind:只能调用一次。即指定第一次绑定到元素时调用,当DOM更新时bind函数不会触发update:在每次DOM更新时调用简写形式:使用自定义指令2.全局自定义指令​ 全局共享的自定义指令,其他组件都能用。在main.js中声明全局自定义指令Vue.directive('指令名称',function(el,binding){})
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
10-14
主要介绍了VUE使用 wx-open-launch-app 组件开发微信打开APP功能,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
解决vue更新路由router-view复用组件内容不刷新的问题
10-16
今天小编就为大家分享一篇解决vue更新路由router-view复用组件内容不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
vue-cron表达式组件
Vue初体验之Vue的组件和路由
qq_45117205的博客
08-29 899
Vue的组件、路由和生命周期
Vue中实现用动态组件代替路由的效果
Meraln的博客
09-05 1655
Vue中实现用动态组件代替路由的效果 话不多说，直接上代码 可直接复制粘贴运行。一个简易的动态组件Demo，仅供参考 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic...
vue组件/路由/子组件改父组件数据
java_jiawawa的博客
12-13 942
这里写目录标题第1部分:启动项目第2部分:组件2.1 定义组件component2.2 注册组件components2.3 独立标签（呈现页面）第2部分:变量2.1 return变量2.1 导出变量（别人引用）2.2 导入变量（必须已导出）2.3 导入变量（必须已导出）三级目录 第1部分:启动项目 Vue前段项目启动：npm run serve 第2部分:组件 2.1 定义组件component 一个页面 模块/组件（json传值）：html+css+js 该组件(含html/js)可单独作为一个js
Vue组件——子组件向父组件传递数据以及路由
weixin_33721344的博客
11-14 669
自定义事件 我们知道，父组件使用 prop 传递数据给子组件。但子组件怎么跟父组件通信呢？这个时候 Vue 的自定义事件系统就派得上用场了。 使用 绑定自定义事件v-on 每个 Vue 实例都实现了事件接口，即： 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 Vue 的事件系统与浏览器...
Vue3组件间通信知识整理——子组件向父组件传参
DM_Cxx的博客
06-05 6910
子组件向父组件传参的方法还是比较多的，在不是setup语法糖的写法下，又是略有不同，在重构项目时最常用的就是第一种传值方法，毕竟这是组合式API代替选项式最通用子传父的写法。对于第二、三种方法，我个人是比较少用的，父传子值用，如果传递的是一个回调函数，会不会容易混淆，导致代码可读性降低呢？使用provide和inject会不会有点大材小用呢？对吧，总之考虑专用性方面还是推荐第一种方法吧。文章有问题之处还望评论斧正！更多其他组件间通信文章链接放在下方⬇Vue3组件间通信知识整理——父组件向子组件传参。
vue tab切换vant-list页面不执行onload
最新发布
07-15
5. 在Vue实例中使用路由 ```javascript const app = new Vue({ router }); app.$mount("#app"); ``` 这样，在切换tab时，页面组件会执行beforeRouteEnter钩子函数，我们可以在该函数中执行onload函数或其他需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值