您现在的位置是：首页 >学无止境 >组件和路由网站首页学无止境

组件和路由

沈忘年 2024-07-17 08:12:27
简介组件和路由

子传父

子组件调用父组件的方法

  1. 在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）
  2. 子组件可以触发这个事件$emit('事件名字

<!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="./bootstrap-3.4.1-dist/vue-2.4.0.js"></script>

    <script src="./bootstrap-3.4.1-dist/axios.min.js"></script>

    <script src="./bootstrap-3.4.1-dist/vue-router.js"></script>

</head>

<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>

</html>

 ref的使用

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

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

<!DOCTYPE html>

<html lang="en">

<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>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <input type="button" value="获取元素" @click="getElement" ref="mybtn">

    <h3 id="myh3" ref="myh3">哈哈哈， 今天天气太好了！！！</h3>

    <hr>

    <login ref="mylogin"></login>

  </div>

  <script>

    var login = {

      template: '<h1>登录组件</h1>',

      data() {

        return {

          msg: 'son msg'

        }

      },

      methods: {

        show() {

          console.log('调用了子组件的方法')

        }

      }

    }

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {},

      methods: {

        getElement() {

          // console.log(document.getElementById('myh3').innerText)

          // console.log(this.$refs.myh3.innerText)

          // console.log(this.$refs.mylogin.msg)

          // this.$refs.mylogin.show()

        }

      },

      components: {

        login

      }

    });

  </script>

</body>

</html>

路由的基本使用

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

路由的跳转

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

路由重定向

redirect可以进行路由的重定向

选中路由高亮

  1. 使用默认的样式

直接设置r

  1. 自定义样式

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

<!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="./bootstrap-3.4.1-dist/vue-2.4.0.js"></script>

    <script src="./bootstrap-3.4.1-dist/axios.min.js"></script>

    <script src="./bootstrap-3.4.1-dist/vue-router.js"></script>

</head>

<body>

    <div id='app'>

        <router-view></router-view>

    </div>

    <template id="index">

        <div>

            首页

            <router-link to="/datel">去详情页</router-link>

            <router-link tag="div" :to="{path:'/datel',query:{courseid:103}}">去详情页</router-link>

            <router-link v-for="item in list " :key="item.courseid"  :to="{path:'/datel',query:{courseid:item.courseid}}">{{item.courseTitle}}</router-link>

        </div>

    </template>

    <template id="mine">

        <div>

            个人

        </div>

    </template>

    <template id="datel">

        <div>

            xiangqingye

        </div>

    </template>

    <script>

        // let index = { template: '#index' }

        let index = {

            template: '#index',

            data() {

                return {

                    list: [

                        {

                            courseid: 1,

                            courseTitle: 'html'

                        },

                        {

                            courseid: 2,

                            courseTitle: 'css'

                        },

                        {

                            courseid: 3,

                            courseTitle: 'js'

                        }

                    ]

                }

            }

        }

        let mine = { template: '#mine' }

        let datel = { template: '#datel' }

        // 这里实例化了一个路由

        const router = new VueRouter({

            routes: [

                {

                    path: '/',

                    component: index

                },

                {

                    path: '/index',

                    //这里需要注意的是我们直接组件的对象放在这里

                    component: index

                },

                {

                    path: '/mine',

                    component: mine

                },

                {

                    path: '/datel',

                    component: datel

                },

            ]

        });

        const vm = new Vue({

            router: router,

            el: '#app',

            data: {

            },

            methods: {

            },

            beforeCreate() { },

            created() { },

            beforeMount() { },

            mounted() { },

            beforeUpdate() { },

            updated() { },

            beforeDestroy() { },

            destroyed() { },

        })

    </script>

</body>

</html>

<!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="./bootstrap-3.4.1-dist/vue-2.4.0.js"></script>

    <script src="./bootstrap-3.4.1-dist/axios.min.js"></script>

    <script src="./bootstrap-3.4.1-dist/vue-router.js"></script>

    <style>

        .router-link-active {

            font-size: 30px;

            color: red;

        }

        .myactive {

            color: aqua;

        }

    </style>

</head>

<body>

    <div id='app'>

        <router-link to="/datel">去详情页</router-link>

        <router-link to="/index">shouye</router-link>

        <router-link to="/mine">geren</router-link>

        <router-view></router-view>

    </div>

    <template id="index">

        <div>

            首页

        </div>

    </template>

    <template id="mine">

        <div>

            个人

        </div>

    </template>

    <template id="datel">

        <div>

            xiangqingye

        </div>

    </template>

    <script>

        // let index = { template: '#index' }

        let index = {

            template: '#index',

            data() {

                return {

                }

            }

        }

        let mine = { template: '#mine' }

        let datel = { template: '#datel' }

        // 这里实例化了一个路由

        const router = new VueRouter({

            linkActiveClass: 'myactive',

            routes: [

                {

                    path: '/',

                    component: index

                },

                {

                    path: '/index',

                    //这里需要注意的是我们直接组件的对象放在这里

                    component: index

                },

                {

                    path: '/mine',

                    component: mine

                },

                {

                    path: '/datel',

                    component: datel

                },

            ]

        });

        const vm = new Vue({

            router: router,

            el: '#app',

            data: {

                list: [

                    {

                        courseid: 1,

                        courseTitle: 'html'

                    },

                    {

                        courseid: 2,

                        courseTitle: 'css'

                    },

                    {

                        courseid: 3,

                        courseTitle: 'js'

                    }

                ]

            },

            methods: {

            },

            beforeCreate() { },

            created() { },

            beforeMount() { },

            mounted() { },

            beforeUpdate() { },

            updated() { },

            beforeDestroy() { },

            destroyed() { },

        })

    </script>

</body>

</html>

定义参数

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

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

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

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

组件的嵌套

  1. 声明路由的时候设置children,这是children是一个数组，数组里是路由对象
  2. 这个children的组件就会渲染在它父组件的<router-view>中
风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐