在页面引入的组件同时也是Vue的实例(如:
)
(1)使用Vue.component
注册一个组件:
// Vue.component的第二个参数,即接收一个组件的构造函数,也接收一个对象
Vue.component('mycom2',{
template:'这是直接使用Vue.component创建出的组件
'
});
(2)把注册好的全局组件标签以标签的形式引入到页面中
<div id="app">
<mycom1>mycom1>
div>
(1)使用template
标签定义一个模板的代码结构:
<template id="tmpl">
<h3>哈哈哈,这是在外界定义的组件UI结构h3>
template>
注意:
template
标签应该放在与id='app’的盒子平级的地方template
如果放在#app里面,则组件会被注册两次,元素会被渲染两次<mycom3>mycom3>
<template id="tmpl">
<h3>哈哈哈,这是在外界定义的组件UI结构h3>
template>
(2)使用Vue.component
注册组件:
Vue.component('mycom3',{
template:'#tmpl'
})
(3)把注册好的全局组件标签以标签的形式引入到页面中
(1)在Vue实例中的定义私有组件(包含组件的名称和组件的结构):
components:{ // 定义实例中的私有组件 包含组件的名称和组件的结构
'mycom4':{
template:"这是定义的私有组件
"
}
}
(2)把注册好的全局组件标签以标签的形式引入到页面中
Vue.component('mycom',{
template:"这是自定义的组件{{msg}}
",
data:function(){
return {
msg:'hhh'
}
},
methods:{
show(){
console.log('触发了组件的show方法');
}
}
})
注意:
data
属性时,data
必须定义为function且必须返回一个对象data:function
,从而得到一个当前组件私有的数据对象(保证每个组件的data是私有的)1.两个组件的简单切换:
使用v-if
和v-else
、标识符、布尔值结合实现两个组件的切换
2.多个组件的切换
(1)把要传递给子组件的数据作为自定义属性,通过v-bind
绑定到子组件身上:
<com1 :msg="parentMsg">com1>
(2)在子组件中不能直接使用父组件传递过来的数据,需要使用props
将数据接收一下:
// 要传递的数据:
data:{
parentMsg:"哈哈哈,你是想笑死我,然后继承我的蚂蚁花呗吗?"
},
components:{
'com1':{ // 在Vue中默认子组件无法直接获取父组件中的数据
template:`
这是子组件中的标题{{msg}}
`,
// 在数组中定义一下msg
props:['msg'] // 在Vue中只有props是数组,其他以-s结尾的是对象
}
}
注意:
props
时候,接受的名称一定要和父组件传递过来的自定义属性名称保持一致props:['msgobj']
接收this.$emit('func')
接收注意:
v-bind
v-on
子组件向父组件传值,本质上,还是调用了父组件传递过来的方法(show方法),只不过,子组件在调用的时候,把数据当作参数传给了这个方法(show方法)
(1)把要传递给子组件的方法作为事件,通过v-on
绑定到子组件身上:
<com1 @func='show'>com1>
(2)为子组件添加自己的触发事件,并传值给父组件:
// 父组件要传递给子组件的方法:
methods:{
show(){
console.log("有人调用了父组件中的show方法");
}
},
components:{
'com1':{
template:`
`,
data:function(){
return{sonMsg:"这是子组件中的值"}
}
methods:{
this.$emit('func',sonMsg); // 第二个位置后面的是子组件向父组件传递的值
}
}
}
}
(3)父组件接收这个参数(值):
data:{
msgFromSon:''
},
methods:{
show(arg1){
// 把子组件传递过来的数据,保存到父组件的data中
this.msgFromSon = arg1;
console.log(this.msgFromSon);
}
},
路由的基本使用:
(1)在导入vue包后导入vue-router的包:
<script src="./lib/vue-router-v3.0.1.js"></script>
(2)创建对应的组件:
const login = {
template:'登陆组件
'
}
const reg = {
template:'注册组件
'
}
注意:
(3)创建路由对象:
const router = new VueRouter({
routes:[
{path:"/login", component:login}, // 路由规则
{path:"/reg", component:reg}
]
})
注意:
routes
:是固定属性,表示路由规则数组----把hash值和组件做对应关系,且每个对象都表示一个路由规则component
的属性不能传字符串,只能传一个对象router-view
(路由的坑)(4)将路由对象挂载在Vue实例中
(5)利用路由的坑(容器),将对应的路由组件填到坑中:
<div id="app">
<router-link to="/login">登录router-link>
<router-link to="/reg">注册router-link>
<router-view>router-view>
div>
注意:
router-link
:路由链接,默认渲染为a标签,也有tag属性router-view
:默认不会被渲染为元素总结:
路由匹配过程:点击不同的路由标签修改hash值,hash值被修改后,被路由规则监听到,然后匹配对应的路由规则
路由的目的:监听hash值的改变,根据路由规则,匹配对应的路由规则,展示对应的路由组件
<router-link to="/login?id=10">登录router-link>
获取参数:
template:'<h3>登陆组件----{{$route.query.id}}h3>',
/
传参:需要修改路由规则,与node的express的传参和获取参数一致<router-link to="/login/10/zs">登录router-link>
修改路由规则:
{path:'/login/:id/:name', component: login}
获取参数:
template:'<h3>登陆组件----{{$route.params.id}}----{{$route.params.name}}h3>',
/
传参时为了方便使用props
获取参数:在组件中使用$route
会使参数和对应的路由形成高度的耦合
使用props
解耦:
const login = {
props:['id','name'],
template:'登陆组件----{{id}}----{{name}}
',
}
const router = new VueRouter({
routes:[
{path:'/login/:id/:name', component:login, props:true}, // 此写法与express完全一致
vue-router
的重点内容v-router
是实现前端路由的children
属性实现路由和组件的嵌套(1)在父路由的组件中创建子路由链接和子路由容器
const account = {
template:`
这是Account账号组件
登录
注册
`
}
(2)创建account路由规则的子路由规则:
const router = new VueRouter({
routes:[
{path:'/account', component:account, children:[
{path:'login',component:login}, // account路由规则的子路由规则
{path:'reg',component:reg},
// 注意:使用children属性创建的路由规则。path的值前面不要加/
]}, // 展示账号组件的路由匹配规则
]
})
注意:
routes:[
{path:'/account',component:account}, // 展示账号组件的路由匹配规则
{path:'/account/login',component:login}, // 展示登陆组件的路由匹配规则
children
属性,实现路由规则的嵌套,这样,组件之间也有了嵌套关系(1)使用components
:
{path:'/',components:{
// 组件名称:组件对象
'top':header,
'left':sidebar,
'right':content,
'bottom':footer
}}
(2)在router-view
中使用name
属性为不同组件命名:
<router-view name='top'>router-view>
<div class="container">
<router-view name='left'>router-view>
<router-view name='right'>router-view>
div>
<router-view name='bottom'>router-view>
}}
(2)在router-view
中使用name
属性为不同组件命名:
<router-view name='top'>router-view>
<div class="container">
<router-view name='left'>router-view>
<router-view name='right'>router-view>
div>
<router-view name='bottom'>router-view>