vue路由使用以及组件扩展

子组件传值父组件

子组件调用父组件的方法

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

子组件给父组件传递数据

1. $emit方法第二个参数可以定义子组件给父组件传递的内容
2. 在父组件中怎么拿到这内容
   2.1 父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到
   2.2 父组件有自定义参数，可以传入$event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。

<div id='app'>
        
        <father>
            
        </father>
    </div>
    <template id="father">
        <div>
            father--{{fromSon}}
            <son :num="num" @getlist="getlist"></son>
            <son @getlist="getlist($event,1)"></son>
        </div>

    </template>
    <template id="son">
        <div>
            son
            {{num}}
            <button @click="sandfather">传给父组件的值</button>
        </div>
    </template>

<script>
        Vue.component('father',{
            template:'#father',
            data(){
                return{
                    num:'10',
                    fromSon:'',

                }
            },
            methods:{
                // 接受来自子组件的值
                getlist(data,){
                    console.log(data);
                    this.fromSon=data

                }
            }

        })
        Vue.component('son',{
            template:'#son',
            props:{
                num:[Number,String]
            },

            methods:{
                sandfather(){
                    // 第一个参数 自定义名字 第二个参数 传递的数据
                    // this.$emit('getlist','传值')
                    // this.$emit('getlist',{name:'传值',age:'15'})
                    this.$emit('getlist','传值a','第二个')
                }
            },
            created(){
                // this.$emit('getlist','传给父组件的值')
                
            }
        })
    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
        }
    })
    </script>

ref的使用

■ 获取dom节点

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

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

<div id='app'>
        <div id="box" ref="box">明天可能考试</div>
        <son ref="son"></son>
        <button @click="changeSon">改变</button>
    </div>
    <template id="son">
        <div>
            son{{myson}}
            <button @click="log1">打印一</button>
        </div>

    </template>

<script>
        Vue.component('son',{
            template:'#son',
            data(){
                return{
                    myson:'myson'
                }

            },
            methods:{
                log1(){
                    console.log(1);
                }
            }
        })
    console.log(document.getElementById('box'));
    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            changeSon(){
                console.log(this.$refs.son.myson);
                this.$refs.son.myson='father'
            }
        },
        created(){
            console.log(this.$refs);
        },
        mounted(){
            console.log(this.$refs.box);
            this.$refs.box.style.color='red',
            this.$refs.box.style.fontSize='40px',
            console.log(this.$refs.son);
            this.$refs.son.log1()
            console.log(this.$refs.son.myson);
        }
    })
    </script>

Vue中路由的使用

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

路由的基本使用

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

路由重定向

redirect可以进行路由的重定向

选中路由高亮

1. 使用默认的样式
   直接设置router-link-active
2. 自定义样式
   配置 linkActiveClass:‘自定义的类名’

 <div id='app'>
        <!-- 5、预留展示区域 -->
        <router-view name="play"></router-view>
        <router-view name="detail"></router-view>
        <router-link :to="{path:'/detail',query:{course:103} }">跳转详情1</router-link>
        <router-link :to="{name:'my',params:{userid:10,age:20} }">跳转我的</router-link>
        <router-view></router-view>
    </div>
    <template id="index">
        <div>
            index
            <a href="#/detail">通过a跳转</a>
            <!-- 声明式跳转 -->
            <router-link to="/detail?courseid=103&age=18">跳转详情</router-link>
            <router-link :to="{path:'/detail' }">跳转详情1</router-link>
            <router-link :to="{path:'/detail',query:{course:103} }">跳转详情1</router-link>
            <router-link :to="{name:'my',params:{userid:10,age:20} }">跳转我的</router-link>
            <!-- 错误的写法 -->
            <!-- <router-link :to="{name:'my' }">跳转我的1</router-link> -->

            <!-- 函数式跳转 -->
            <button @click="todetail">跳转详情</button>
            <button @click="tomine">跳转我的</button>
        </div>
    </template>
    <template id="detail">
        <div>
            detail
            <router-view></router-view>
        </div>
    </template>

    <template id="mine">
        <div>
            mine
        </div>
    </template>
    <template id="play">
        <div>
            play
        </div>
    </template>

<script>
        let play = {
            template: '#play'
        }
        let mine = {
            template: '#mine',
            created() {
                console.log(this);
                console.log(this.$route.params.userid);
            }
        }
        let index = {
            template: '#index',
            methods: {
                todetail() {
                    console.log(this);
                    this.$router.push({
                        path: "/detail",
                        query: {
                            course: 104
                        }
                    })
                },
                tomine() {
                    this.$router.push({
                        name: 'my',
                        params: {
                            userid: 1111
                        }
                    })
                }
            }
        }
        let detail = {
            template: '#detail',
            created() {
                console.log(this.$route.query.course);
            }
        }
        // 2、创建路由对象：
        const router = new VueRouter({
            // 3、创建映射关系
            routes: [
                // 路由重定向
                {
                    path: '/',
                    redirect: '/index'
                },
                {
                    path: '/index',
                    // component: index,
                    components: {
                        default: index,
                        play,
                        detail
                    }
                },
                {
                    path: '/detail',
                    component: detail,
                    // 路由嵌套
                    children: [
                        {
                            path: 'play',
                            component: play,
                            // children: [
                            //     {
                            //         path: 'url',
                            //         component: 组件
                            //     }
                            // ]
                        }
                    ]
                },
                {
                    path: '/mine/:userid',
                    component: mine,
                    name: 'my'
                },

            ],
            // 自定义路由高亮
            linkActiveClass: 'active'
        })
        const vm = new Vue({
            // 4、将路由挂载在vue实例上
            // router: router,
            router,
            el: '#app',
            data: {
            },
            methods: {
            }
        })
    </script>

路由的跳转

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

组件的嵌套

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

命名视图

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

Computed用法

默认只有getter的计算属性：
计算事件

<div id='app'>
        <input type="text" v-model="firstname">+
        <input type="text" v-model="lastname"><button @getName="getName">=</button>
        <input type="text" v-model="name">
    </div>

const vm = new Vue({
            el: '#app',
            data: {
                firstname: '',
                lastname: '',
                // name: '',
                obj: {
                    name: ''
                }

            },

// 计算事件
            computed: {
                // 计算属性“name”已在数据中定义。 不能在data中定义
                // 第一种方法
                // name(){
                //     return this.firstname+'-'+ this.lastname
                // }
                name: {
                    // 第二种
                    get() {
                        // return this.firstname+'-'+ this.lastname
                    },
                    // 第三种
                    set(val) {
                        console.log(val.split('-'));
                        if (val.split('-').length == 2) {
                            this.firstname = val.split('-')[0]
                            this.lastname = val.split('-')[1]
                        }
                    }
                }
            },

method、computed和watch的区别

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