vue笔记（3）

爱被打了一巴掌 2022-06-02 09:23 178阅读 0赞

父子组件，默认情况下父子组件之间数据不能直接使用，所以有一些新的方法、

1、子组件获取父组件数据  
—父组件调用子组件时`<bb :m="msg" :y="msg2"></>`//msg/msg2为父组件数据  
—子组件内部声明  
—–1、props:\[‘m’,’y’\]  
—–2.props:\{  
—-‘m‘:String//数据类型，如果从父级获取的数据不是该类型会报错  
—-’y‘:Number  
\}

父组件获取子组件的数据  
—-子组件把数据发送到父级  
—-子组件中写入 \`vm.$emit(事件名,数据)  
—-父组件中定义获取数据的方法//getMsg(msg)

<template> <bb @事件名（$emit发送的事件名）=“方法名（父组件）”></> </> //实例 <script src="./vue-1.0.28.js"></script> </head> <body> <div id="box"> 付组件的数据==》{ { mag}}<br> <aaa>这里也不能显示呢,不要往这里写东西</aaa> </div> <template id="aa"> <h1>{ { msg}}</h1> <bbb @childmsg="getMsg"></bbb> </template> <template id="bb"> <h2>我是bbb的数据----{ { msg2}}</h2> <input type="button" @click="toPar" value="submit"> </template> <script> new Vue({ el: "#box", data: { mag: "我是父组件的数据" }, components:{ "aaa":{ data(){ return { msg:11111111111 } }, methods:{ getMsg(msg){ // alert(msg) this.msg+=msg; } } , template:"#aa", components:{ "bbb":{ data(){ return { msg2:22222222222 } }, template:"#bb", methods:{ toPar(){ this.$emit("childmsg",this.msg2) } } } } } } }) </script>

====================  
2.0后淘汰的方法  
`vm.$dispatch(事件名，数据)`  
`vm.$broadcast(事件名，数据)`  
这两个需要配合event

占位符

<aa>当这里有文字时模板中需要使用slot</aa>
    <template id="aa">
        <h1>调用aa标签时，标签中的内容为模板中slot的位置</>    
        <slot>如果aa标签中没有内容，则显示这里的内容</>
    </>
    
    2/ <template>中设置slot的位置,之后用name进行关联<slot name="aaa"></>
    html中设置<ul slot="aaa"></>//这样，占位符就能与标签相对应

实例：

路由 vue-router  
下载 bower install vue-router\#0.7.13  
html部分写法 `<a v-link="{path:'/home'}">主页</a>`  
展示内容 `<router-view></router-view>`

多级路由

router.map( 'home':{ component:Home, subRoutes:{ 'login':{ component:{ template:'#aa' } } } } ) html写法 <a v-link="{path:'/home/login'}">login</> <router-view></>. 路由设计的其他信息 /details/:id/age/:age { {$route.params |jsom}} -> 获取传递的参数 ->{id:'',age:'' } { {$route.path}} -> 当前的路径 —>/details/001?a=2&b=1 { {$route.query |json}} -> 数据（get方式传递过来的）—>{a:1,b:2} //实例 <script src="./bower_components/vue/dist/vue.js"></script> <script src="./bower_components/vue-router/dist/vue-router.js"></script> </head> <body> <div id="box"> <h1>路由练习</h1> <div> <a v-link="{path:'/home'}">home</a> <a v-link="{path:'/news'}">news</a> </div> <div> <router-view></router-view> </div> </div> <template id="home"> <h1>我是home页 ---{ { msg}}</h1> <div> <a v-link="{path:'/home/login'}">login</a> <a v-link="{path:'/home/regist'}">regist</a> </div> <div> <router-view @aaa="get"></router-view> </div> </template> <template id="news"> <h1>我是news页</h1> <a v-link="{path:'/news/details/001'}">我是新闻1</a> <a v-link="{path:'/news/details/002'}">我是新闻12</a> <hr> <router-view></router-view> </template> <template id="reg"> <h3 @click='send'>{ { aa}}</h3> </template> <template id="details"> { {$route.path}} <hr> { {$route.params | json}} <hr> { {$route.query | json}} </template> <script> var router = new VueRouter(); var app = Vue.extend(); var Home = Vue.extend({ template:"#home", data(){ return { msg:"woshi home" } }, methods:{ get(data){ // alert(data) this.msg+=data; } } }) var News = Vue.extend({ template:"#news" }) var details = Vue.extend({ template:"#details" }) router.map({ '/home':{ component:Home, subRoutes:{ 'login':{ component:{ template:"<h2>我是login</h2>", } }, 'regist':{ component:{ template:"#reg", data(){ return { aa:"woshiREG" } }, methods:{ send(){ // alert(this.aa) this.$emit('aaa',this.aa) } } }, } } }, '/news':{ component:News, subRoutes:{ 'details/:id':{ component:details } } } }) router.start(app,"#box") router.redirect({ '/':'home'}) </script>