vue笔记（3）
程序员文章站
2022-03-29 14:49:58
...
父子组件，默认情况下父子组件之间数据不能直接使用，所以有一些新的方法、
1、子组件获取父组件数据
—父组件调用子组件时<bb :m="msg" :y="msg2"></>//msg/msg2为父组件数据
—子组件内部声明
—–1、props:[‘m’,’y’]
—–2.props:{
—-‘m‘:String//数据类型，如果从父级获取的数据不是该类型会报错
—-’y‘:Number
}
<script src="./bower_components/vue/dist/vue.js"></script>
</head>
<body>
<div class="box">
<my-aa></my-aa>
</div>
<!-- <script type="x-template" id="aa"> 声明组件的方式，
<h2>{{msg}}</h2>
</script> -->
<template id="aa">
<h2>{{msg+1}}</h2>
<bb :m="msg"></bb>
</template>
<template id="bb">
{{m}}---------{{aaa}}
</template>
<script>
new Vue({
el:".box",
data:{
msg:11111111
},
components:{
"my-aa":{
data(){
return {
msg:22222222222
}
},
template:"#aa",
components:{
"bb":{
data(){
return {
aaa:111
}
},
props:['m'],
template:"#bb"
}
}
}
}
})
</script>父组件获取子组件的数据
—-子组件把数据发送到父级
—-子组件中写入 `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"></>//这样，占位符就能与标签相对应实例：
<script src="./bower_components/vue/dist/vue.js"></script>
</head>
<body>
<div class="box">
<div>
{{msg}}
</div>
<new-a>
<ol slot="newa2">
<li>3</li>
<li>6</li>
</ol>
<ul slot="newa">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</new-a>
</div>
<template id="aa">
<h1>{{msgA}}</h1>
<slot name="newa">我是slot</slot>
<new-b>
<ol slot="newb">
<li>3</li>
<li>4</li>
</ol>
</new-b>
<slot name="newa2"></slot>
</template>
<template id="bb">
<slot name="newb"></slot>
<h2>{{msgB}}</h2>
</template>
<script>
new Vue({
el:".box",
data:{
msg:'我是根组件'
},
components:{
'newA':{
data(){
return {
msgA:"我是组件A"
}
},
template:"#aa",
components:{
'newB':{
data(){
return {
msgB:'我是组件b'
}
},
template:'#bb',
}
}
}
}
})
</script>路由 vue-router
下载 bower install vue-router#0.7.13
html部分写法 <a v-link="{path:'/home'}">主页</a>
展示内容 <router-view></router-view>
<script>
//1. 准备根文件
var app = Vue.extend();
//2.写入各个页面的组件（如home/news 我的实例）
var Home = Vue.extend({//Home是模板名
template:'<h1>我是主页';
});
//3.准备路由
var router = new VueRouter();
//4.关联
router.map({
'home':{
component:Home
}
})
//5.启动路由
router.start(app,"#box")
//指定首页路由，打开网站后直接跳到的路由
router.redirect({
'/':'home'
})
</>
//实例
<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">
<a v-link="{path:'/home'}">主页</a>
<a v-link="{path:'/other'}">other</a>
<router-view></router-view>
</div>
<script>
var app = Vue.extend();
var router = new VueRouter();
var home = Vue.extend({
template:"<h1>i'm home"
})
var other = Vue.extend({
template:"<h2>i'm other"
})
router.map({
'home':{
component:home
},
'other':{
component:other
}
})
router.start(app,"#box")
//页面刚出来直接跳转指定页面
router.redirect({
'/':'home'
})
</script>多级路由
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>上一篇： php和nginx如何交互
下一篇： php开启错误提示