vue笔记3

component  ：
Vue 提供了 component，来展示对应名称的组件
<!-- component 是一个占位符, :is 属性，可以用来指定要展示的组件名称 -->
栗子：<component :is="comName"></component>

复习：Vue 提供的标签
component      template    transition     transitionGroup

父组件向子组件传递值
html中：<coml :parentmsg="msg"></coml>

子组件中：
template:"<h3>{{parentmsg}}</h3>",
props: ['parentmsg'],//把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样才能使用这个数据


$emit    用来调用父组件的方法 
//emit 英文原意： 是触发，调用、发射的意思
HTML中：<coml @自定义名="show"></coml>
使用：this.$emit('自定义名','参数:(根据父组件方法有没有参数)')


ref 获取DOM元素和组件
使用方法：在标签上添加ref属性   例如：<h3 ref="myh3">..</h3>  <组件 ref="myh3"></组件>
调用方法:      this.$refs.myh3.需要的方法、数据等。。


Vue Router  路由：第一种基本使用

1.引入  <script src="./bil/vue-router.js"></script>
2.路由创建：           组件 例：var login = { template:"<h3>登录组件</h3>" }
var routerObj = new VueRouter({
      //route 这是配置对象中的 route 表示 【路由匹配规则】 的意思
            routes:[//路由匹配规则
                //属性1 是path,表示监听 哪个路由链接地址
                //属性2 是component,表示，如果 路由是前面匹配到的path，则展示 component 属性对应的哪个组件
	{ path: '/', redirect : '/login'}
                { path: '/login', component: login },
                { path: '/register', component: register }
            ],
             linkActiveClass: 'myactive' 
})
3.创建完成之后，将路由规则对象，注册到vm 实例上     例： router:routerObj 
4.HTML中使用 占位符   <router-view></router-view>


Vue Router 的 第二个标签 <router-link></router-link>
<router-link  to="路由链接地址"   tag="想渲染的标签名"></router-link> 默认渲染成a标签

redirect 重定向
{ path: '/', redirect : '/login'}  在路由规则内使用

linkActiveClass: 'myactive'   在路由规则内使用，用来修改router-link中默认class名字

路由两种传参方式：
query：
路由传参   传参：/login?id=10&name=xm       获取：$route.query.id || name

params:
路由传参     规则：{ path: '/login/:id/:name', component: login },    传参：/login/10/xm      
获取：$route.params.id || name

路由嵌套  children
使用方式：在路由规则内使用     
栗子：{ path: '/', redirect : '/logins', children:[ { path: 'login', component: login },    
这样的请求路径：/logins/login

components  //实现一个链接加载多个组件
在路由规则内
{ path: '/', components:{
                        'default':header,// 自定义名:组件  不加'',系统默认给它加上（可省略）
                        left:leftbox,
                        maisn: mainBox
}
使用方式：Html中使用  <router-view name="maisn"></router-view> 
<router-view name="default"></router-view>