Vue2.0-下篇

最新推荐文章于 2024-12-10 10:33:47 发布

原创最新推荐文章于 2024-12-10 10:33:47 发布 · 697 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue2-0 #组件 #路由

Vue 专栏收录该内容

3 篇文章

订阅专栏

全局组件

语法糖

在vue中，组件不能继承父级的数据，不能直接使用外围包裹的一些数据

vm实例中，数据存放在data属性。组件中，数据由data()方法返回。使用数据时，均用花括号{{}}解析，如{{name}}、{{msg}}

<div id="app">
    <hello></hello>
</div>


<script>
    //方法一
    var et=Vue.extend({
        template:'<h1>hello,welcome to wuhan</h1>'
    });
    //注册组件
    Vue.component('hello',et);

    //方法二:语法塘
    Vue.component('hello',{

        template:'<h1>{{msg}},welcome to wuhan</h1>',
        // template:'<h1>{{msg}},welcome to {{name}}</h1>'
        // 控制台报错: Property or method "name" is not defined on the instance

        data(){
            return {
                msg:'Hello'
            }
        }
    });

    var vm=new Vue({
        el:'#app',
        data:{
            name:'hubei'
        }
    });
</script>

局部组件

<div id="app">
    <hello></hello>
</div>

<script>
    //局部组件在实例内部声明，可以有多个
    var vm=new Vue({
        el:'#app',
        components:{
            hello:{
                template:'<h1>{{name}}</h1>',
                data(){
                    return {name:'wuhan'}
                }
            }
        }
    });
</script>

父子组件


<div id="app">
    <parent></parent>
</div>

<template id="tp">
    <div>
        <div>parent</div>
        <child></child>
    </div>
</template>

<script>
    //局部组件在实例内部声明，可以有多个
    var vm=new Vue({
        el:'#app',
        components:{
            parent:{
                template:'#tp',
                components:{
                    child:{
                        template:'<div>child</div>'
                    }
                }
            }
        }
    });
</script>

子组件向父组件传递数据

$emit( [自定义事件名] , [传递数据])

点击Child，触发“s”事件，并向事件绑定的方法传递子组件自身的age。parent组件中，@s事件发生后，执行p方法，p(data)将传进来的年龄赋值给父组件自身的age属性。

<div id="app">
    <parent></parent>
</div>

<template id="tp">
    <div>
        <div>parent</div>{{age}}
        <child @s="p"></child>
    </div>
</template>

<script>
    //局部组件在实例内部声明，可以有多个
    var vm=new Vue({
        el:'#app',
        components:{
            parent:{
                template:'#tp',
                data(){
                  return {age:0}
                },
                methods:{
                    p(data){
                        this.age=data;
                    }
                },
                components:{
                    child:{
                        template:'<div @click="sayAge">child</div>',
                        data(){
                            return {age:18}
                        },
                        methods:{
                            sayAge(){
                                //向上发射事件$emit
                                this.$emit('s',this.age);
                            }
                        }
                    }
                }
            }
        }
    });
</script>

父组件向子组件传递数据

1、传：在父组件的模板中，给子组件的n属性动态绑定父组件的name

2、收：在子组件中声明属性n。

方法一：props:[‘n’]，数组中添加属性名n即可，来什么收什么。

方法二：props:{ n:String }，对象中添加一个键值对key:value，key是属性名，value是属性的数据类型。n:String表示属性n只接收String类型的数据，否则，虽然收到的数据仍会显示出来，但会报错

Invalid prop: type check failed for prop "n". Expected String, got Number.

<div id="app">
    <parent></parent>
</div>
<template id="tp">
    <div>
        <div>parent</div>
        <child :n="name"></child>
    </div>
</template>

<script>
    //局部组件在实例内部声明，可以有多个
    var vm=new Vue({
        el:'#app',
        components:{
            parent:{
                template:'#tp',
                data(){
                    return {
                        //name:'Hangzhou'
                        name:123
                    }
                },
                components:{
                    child:{
                        template:'<div>child {{n}}</div>',
                        //props:['n']
                        //对属性的数据类型进行校验
                        props:{n:String}
                    }
                }
            }
        }
    });
</script>

注意

详情见Vue官方文档

HTML是不区分大小写的，deliveryPrice属性在HTML中写为delivery-price

goods.vue

<template>

    <shopcart :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></shopcart>

</template>

shopcart.vue

<script type="text/ecmascript-6">
  export default {
    props: {
      deliveryPrice: String
    }
  };
</script>

子组件改变父组件数据（*）

vue1.0可以，但vue2.0不可以。
在vue2.0中，子组件是不允许更改父组件的

父组件传给子组件的是引用数据类型，此时，两者操作的是同一个地址的数据，达到子组件可以改变父组件数据的效果

<div id="app">
    <parent></parent>
</div>
<template id="tp">
    <div>
        <div>parent</div>{{name.name}}
        <child :n="name"></child>
    </div>
</template>

<script>
    //局部组件在实例内部声明，可以有多个
    var vm=new Vue({
        el:'#app',
        components:{
            parent:{
                template:'#tp',
                data(){
                  //2.0,返回的不再是字符串，而是一个对象，引用数据类型
                  return {name:{name:'Hangzhou'}}
                },
                components:{
                    child:{
                        template:'<div @click="update">child {{n.name}}</div>',
                        methods:{
                            update(){
                                this.n.name='jw'
                            }
                        },
                        //2.0
                        props:{n:Object}
                    }
                }
            }
        }
    });
</script>

对比vue1.0

1.0 只用加sync，就可以将子组件与父组件的数据同步，更改子组件的，父组件也会更改


<div id="app">
    <parent></parent>
</div>

<template id="tp">
    <div>
        <div>parent</div>{{name}}
        <child :n.sync="name"></child>
    </div>
</template>

<script src="vue1.0.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        components:{
            parent:{
                template:'#tp',
                data(){
                  return {name:'Hangzhou'}
                },
                components:{
                    child:{
                        template:'<div @click="update">child {{n}}</div>',

                        methods:{
                            update(){
                                this.n='jw'
                            }
                        },
                        //1.0
                        props:{n:String}
                    }
                }
            }
        }
    });
</script>

子组件更改，父组件数据不同步

<div id="app">
    <parent></parent>
</div>
<template id="tp">
    <div>
        <div>parent</div>
        {{name}}
        <child :n="name"></child>
    </div>
</template>
<script src="vue2.0.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        components:{
            parent:{
                template:'#tp',
                data(){
                    return {name:'Hangzhou'}
                },
                components:{
                    child:{
                        template:'<div @click="update">child {{a}}</div>',
                        data(){
                            return {a:''}
                        },
                        mounted(){
                            this.a=this.n;
                        },
                        methods:{
                            update(){
                                this.a='jw'
                            }
                        },
                        props:{n:String}
                    }
                }
            }
        }
    });
</script>

若components这样写（不推荐），如下：

会警告
vue2.0.js:465 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “n”

当父组件重新渲染时，子组件已经更改过的数据会被父组件传递过来的数据覆盖掉，因此推荐使用上一种方法。

components:{
    child:{
        template:'<div @click="update">child {{n}}</div>',
        methods:{
            update(){
                this.n='jw'
            }
        },
        props:{n:String}
    }
}

组件的is特性

用于显示特定的组件，当有多个组件，但在特定时刻只需要显示其中的某个时，可以用到组件的is特性。

<div id="app">
    <button @click="comp='hello'">显示英文版hello</button>
    <button @click="comp='hello1'">显示中文版你好</button>
    <component :is="comp"></component>
</div>

<template id="hello">
    <div>
        hello
    </div>
</template>
<template id="hello1">
    <div>
        你好
    </div>
</template>

<script src="vue2.0.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            comp:'hello'
        },
        components:{
            hello:{
                template:'#hello'
            },
            hello1:{
                template:'#hello1'
            },

        }
    });
</script>

组件slot槽

组件标签中可以插入内容。例如中想要插入其他内容，此时就要用到slot槽，否则即使写入内容，也会被组件template模板中的内容给覆盖掉。

没有名字的slot使用步骤：

1、直接写入内容，如

<hello>我叫小高</hello>

2、组件模板中添加slot标签，如

<template>
    hello<slot></slot>
</template>

具名slot使用步骤：

1、插入的内容添加slot属性，如

<div slot="name">我叫小高</div>

2、组件模板中添加slot标签，并给出name属性，且与上一步中的slot值对应，例如

<template>
    hello
    <slot name="name"></slot>
</template>

下面代码显示结果：
- hello
- 今年三岁了
- 我叫小高

<div id="app">
    <hello>
        <div slot="name">我叫小高</div>
        <div slot="age">今年三岁了</div>
    </hello>
</div>
<!--没有名字的slot 具有名字的slot-->
<template id="hello">
    <div>
        <!--slot直接使用，在<hello>标签中插入的内容会自动到插槽中去了-->
        <!--没有名字的slot-->
        <!--hello <slot></slot>-->
        <!--具名slot-->
        hello <slot name="age"></slot><slot name="name"></slot>
    </div>
</template>

<script src="vue2.0.js"></script>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            comp:'hello'
        },
        components:{
            hello:{
                template:'#hello'
            },
        }
    });
</script>

非父子组件的交互

发：点击按钮，hello组件触发send方法，send方法调用Event.$emit(‘我饿了’,this.msg)，触发了’我饿了’事件，并传递hello组件的msg属性。

收：hello1组件挂载的时候，Event.$on(‘我饿了’,[function(data)])会监听事件，当监听到了’我饿了’事件，则调用回调函数,将接收到的data赋值给hello1组件的msg。

<div id="app">
    <hello></hello>
    <hello1></hello1>
</div>

<template id="hello">
    <div>
        hello
        <button  @click="send">传递数据</button>
    </div>
</template>

<template id="hello1">
    <div>hello1 {{msg}}</div>
</template>

<script src="vue2.0.js"></script>
<script>
    //事件a
    var Event=new Vue;//event.$on event.$emit
    var vm=new Vue({
        el:'#app',
        components:{
            hello:{
                template:'#hello',
                data(){
                    return {msg:'我非常饿'}
                },
                methods:{
                    send(){
                        Event.$emit('我饿了',this.msg);
                    }
                }
            },
            hello1:{
                mounted(){
                    //用箭头函数，保证this的指向问题
                    Event.$on('我饿了',(data)=>{
                        //console.log(this);//this是当前hello1组件，如果不用箭头函数，this为hello组件
                        this.msg=data;
                        console.log('msg挂载');//每点击一次按钮，都会执行mounted
                    });
                },
                data(){
                    console.log("data加载");//只会执行一次，在打开页面的时候
                    return {msg:''}
                },
                template:'#hello1'
            },
        }
    });
</script>

路由

后期专题补充说明路由

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .router-link-active{
            background: wheat;
        }
    </style>
</head>
<body>
<div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/list">列表页</router-link>
    <router-view></router-view>
</div>

<script src="vue2.0.js"></script>
<script src="vue-router2.0.js"></script>
<script>
    //2.0规定，组件必须要有一个根节点
    var Home={template:`<div>
                            <h1>首页</h1>
                            <router-link to="/home/login">登录</router-link>
                            <router-link to="/home/reg">注册</router-link>
                            <router-view></router-view>
             </div>`}

    var List={template:`<div>
                            <h1>列表</h1>
                            <router-link to="/list/news/1">消息1</router-link>
                            <router-link to="/list/news/2">消息2</router-link>
                            <router-view></router-view>
             </div>`}
    var router=new VueRouter({
        routes:[
            //方法一
//            {path:'/home',component:{
//                    template:'<h1>首页</h1>'
//            }},

            //方法二
            {path:'/home',component:Home

                //子路由
                children:[
                    //children中，路径最前面不能加'/'
                    {path:'login',component:{
                        template:'<div>登录</div>'
                    }},
                    {path:'reg',component:{
                        template:'<div>注册</div>'
                    }}
                ]
            },
            {path:'/list',component:List,
                children:[
                    {path:'news/:nid',component:{
                        template:'<div>消息是{{$route.params.nid}}</div>'
                    },

                    beforeEnter(to,from,next){
                        console.log(to.params.nid);
                        //next();//若没有这一步，代码不会继续向下执行，组件就不会继续渲染
                    }}
                ]
            },
            {path:'*',component:Home},
        ]
    })
    var vm=new Vue({
        router,
        el:'#app'
    });

</script>