vue路由使用以及组件扩展

最新推荐文章于 2024-05-23 08:40:29 发布

Yoren~

最新推荐文章于 2024-05-23 08:40:29 发布

阅读量227

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hafk12/article/details/130995462

版权

本文详细介绍了Vue.js中组件的定义与扩展，包括使用Vue.extend和Vue.component，以及模板字符串的不同方式。此外，还讲解了父子组件间的数据传递，如props和$emit方法。接着讨论了ref的使用，用于获取DOM节点或组件引用。最后，重点阐述了路由的基本应用，如创建VueRouter、配置路由、路由跳转、重定向、路由高亮和参数传递等。

摘要由CSDN通过智能技术生成

1.定义组件

1.使用 Vue.extend 配合 Vue.component 方法：

var login = Vue.extend({

2.直接使用 Vue.component 方法：

Vue.component('register', {

3.将模板字符串，定义到script标签中：

同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {

4.将模板字符串，定义到template标签中：

< template id="tmpl">

同时，需要使用 Vue.component 来定义组件：

Vue.component('account', {

注意：组件中的DOM结构，有且只能有唯一的根元素（Root Element）来进行包裹！

2.父组件传值子组件

<template id="father">
            <div>
                <!-- 父传子 -->
                <son coursetype='free'>免费</son>
                <son coursetype='boutique'>精品</son>
                <son coursetype='discount'>折扣</son>
            </div>
        </template>

 Vue.component("father", {
            template: "#father"
        })
        Vue.component("son", {
            template: "#son",
            data() {
                return {
                    baseUrl: 'https://wkt.shangyuninfo.cn',
                    list: []
                }
            },
            // 接受父组件传参
            props: {
                coursetype: {
                    type: [String, Number]
                }
            },
            created() {
                // console.log(this.coursetype);
                let formurl = new URLSearchParams()
                // formurl.append('type', 'free')
                formurl.append('type', this.coursetype)
                formurl.append('pageNum', 1)
                formurl.append('pageSize', 5)
                axios.post(this.baseUrl + '/weChat/applet/course/list/type', formurl).then(res => {
                    this.list = res.data.rows
                })
            }
        })
        var vm = new Vue({
            el: '#app2',
            data: {
            },
            methods: {

            },
        })

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

props: {

// 规定了父组件只能传对象类型

prop1:Object

// 可以设置多个类型，可以传Number也可以传String

parentMsg: [Number, String],

list: {

// 设置类型

type: Array,// [Array,String]

// 设置默认值的时候必须使用函数，原理和data必须使用函数是一样的

default: function () {

return [{

}]

}

3.子组件传值父组件

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

<body>
    <!-- 1.给组件添加事件 -->
    <div id="app">
        <son v-on:click-son='clickParent($event,"自定义参数")' v-on:click-son2='clickParent2'></son>
    </div>

    <template id='sonTemp'>
        <div>
            <button @click='clickSon'>点击事件</button>
            <button @click='clickSon2'>点击事件2</button>
            <h3>这是子组件的内容</h3>
        </div>
    </template>
    
    <script>
        var son = {
            template: '#sonTemp',
            methods: {
                clickSon() {
                    console.log('子组件的方法');
                    // 2. 在子组件中触发这个事件
                    // 发射，触发
                    // 通过这种方式，子组件也可以给父组件传值
                    this.$emit('click-son', {
                        name: '张三'
                    })
                },
                clickSon2(){
                    console.log('子组件的方法2');
                    this.$emit('click-son2', 'nihao')
                }
            },
        }

        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {
                // e是接受子组件传过来的参数，msg是这个方法自己参数
                clickParent(e, msg) {
                    console.log(e);
                    console.log('父组件的方法,数据为：' + msg);
                },
                clickParent2(e) {
                    console.log(e);
                }
            },
            components: {
                son
            }
        })
    </script>

4.ref的使用

获取dom节点

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

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

<body>
    <div id='app'>
        <!-- 获取dom节点 -->
        <h1 ref="refdom">ref的使用</h1>
        <!-- 获取组件节点 -->
        <!-- 原生js获取dom，只能根据id选择器得到页面渲染代码 -->
        <!-- 而ref则可以拿到组件对象，以及里面的属性 -->
    </div>


    <script>
    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        },
        beforeCreate(){},
        created(){
           
        },
        beforeMount(){},
        mounted(){
            console.log(this.$refs)//对象
            console.log(this.$refs.refdom);
        },
        beforeUpdate(){},
        updated(){},
        beforeDestroy(){},
        destroyed(){},
    })
    </script>

5.路由

路由的基本使用

引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
创建路由new VueRouter(),接受的参数是一个对象
在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
path属性是url的地址,component属性就是显示的组件（传组件的对象）
创建的路由需要和vue实例关联一下
路由到的组件显示在哪个位置<router-view></router-view>

路由的跳转

router-link标签可以设置to属性
默认是a标签，可以通过tag设置包裹标签

示例：

<router-link to='/login'>登录</router-link>

<router-link to='/registry'>注册</router-link>

路由重定向

redirect可以进行路由的重定向

选中路由高亮

使用默认的样式

直接设置router-link-active

自定义样式

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

定义参数

通过query的方式在url后加?参数名=参数的值

获取参数：$route.query.参数名

使用浏览器参数的方式传递参数

设置路由的时候/路由地址/:参数名
获取参数$route.params.参数名

<body>
        <div id='app'>
            <!-- 预留展示区域 -->
            <router-view></router-view>

        </div>


        <template id="login">
            <h2>
                首页
                <!-- 父传子 -->
                <router-link to="/user">去用户页</router-link>
                <!-- 字符串传参 query -->
                <router-link :to="{path:'/user'}">去用户页</router-link>
                <router-link :to="{path:'/user',query:{courseid:1}}">去用户页</router-link>
                <!-- 若页面为对象列表 -->
                <!-- <router-link v-for="(item,index) in list" :key="item.id" :to="{path:'/user',query:{courseid:item.id}}">{{item}}</router-link> -->
            </h2>
            <!-- 跳转 -->
            
        </template>
        <template id="user">
            <h2>用户页</h2>
        </template>

    </body>
    <script>
        // 定义组件
        let login = { template: '#login' }
        let user = { template: '#user' }

        let router = new VueRouter({
            routes: [
                {// 去除#
                    path: '/',
                    // 路由重定向 redirect
                    redirect: '/login',
                },
                {
                    // path:"/login",//路径
                    // 此处为/默认使login为根目录
                    path: '/login',
                    component: login
                },
                {
                    path:'/user',
                    component:user
                }

            ]
        })
        const vm = new Vue({
            // 把路由挂载到实践上
            router,
            el: '#app',
            data: {
            },
            methods: {
            },

        })
    </script>